@frankhoodbs/cta-button-cmp v2.0.6
Cta Button Component
Component that allows creating a button or a link, with advanced features for managing tags and associated properties, as well as slots for icons.
Componente che permette di creare un pulsante o un link, con funzionalità avanzate per la gestione dei tag e delle proprietà associate, nonché slot per icone.
API Reference
Props
Name | Type | Description |
---|---|---|
data-tag | string | Tag of the button. Can be one of the following: a , button , router-link . |
data-url | string | If data-tag is a, the href of the tag a. |
data-download | boolean | Indicates that the link is a file to download. |
data-filename | string | The file to download. |
data-target | string | If data-tag is a, the target of the tag a. |
data-rel | string | If data-tag is a, the rel of the tag a. |
data-referrerpolicy | string | If data-tag is a, the referrerpolicy of the tag a. |
data-type | string | If data-tag is button, the type of the tag button. |
data-to | string or object | If data-tag is router-link, the to attribute of the router-link. |
data-aria-label | string | The value of the aria-label. |
data-disabled | boolean | Indicates that the cta is disabled. |
data-loading | boolean | Indicates that the action triggered by the cta is in progress. |
Slots
Slot Name | Description |
---|---|
default | Text inside cta |
before-icon | Icon SVG before the text |
after-icon | Icon SVG after the text |
loading-icon | Loading icon svg |
CSS variables
Name | default | Description |
---|---|---|
--cta-button-display | inline-flex | Value of the display property. Should be flex or inline-flex. |
--cta-button-align-items | center | Value of the align-items property. |
--cta-button-justify-content | center | Value of the justify-content property. |
--cta-button-width | auto | Cta width. |
--cta-button-height | auto | Cta height. |
--cta-button-padding | 1.5rem 3rem | Cta padding. |
--cta-button-border-width | 1px | Border width. |
--cta-button-border-style | solid | Border style. |
--cta-button-border-color | navy | Border color. |
--cta-button-border-radius | 0 | Cta border-radius. |
--cta-button-bg-color | navy | Cta background-color. |
--cta-button-box-shadow | none | Cta box-shadow. |
--cta-button-color | white | Cta color. |
--cta-button-font-weight | inherit | Cta font-weight. |
--cta-button-font-size | inherit | Cta font-size. |
--cta-button-line-height | normal | Cta line-height. |
--cta-button-font-family | inherit | Cta font-family. |
--cta-button-text-decoration | none | Cta text-decoration. |
--cta-button-cursor | pointer | Cta cursor. |
--cta-button-opacity | 1 | Cta opacity. |
--cta-button-disabled-border-width | 1 | Border width when the cta is disabled. |
--cta-button-disabled-border-style | solid | Border style when the cta is disabled. |
--cta-button-disabled-border-color | navy | Border color when the cta is disabled. |
--cta-button-disabled-bg-color | navy | Background-color when the cta is disabled. |
--cta-button-disabled-box-shadow | none | Box-shadow when the cta is disabled. |
--cta-button-disabled-color | #000000 | Color when the cta is disabled. |
--cta-button-disabled-text-decoration | white | Text-decoration when the cta is disabled. |
--cta-button-disabled-cursor | not-allowed | Cursor when the cta is disabled. |
--cta-button-disabled-opacity | 0.333 | Opacity when the cta is disabled. |
--cta-button-hover-border-width | 1 | Border width when the cta is in hover status. |
--cta-button-hover-border-style | solid | Border style when the cta is in hover status. |
--cta-button-hover-border-color | navy | Border color when the cta is in hover status. |
--cta-button-hover-bg-color | navy | Background-color when the cta is in hover status. |
--cta-button-hover-box-shadow | none | Box-shadow when the cta is in hover status. |
--cta-button-hover-color | white | Color when the cta is in hover status. |
--cta-button-hover-text-decoration | none | Text-decoration when the cta is in hover status. |
--cta-button-hover-opacity | 1 | Opacity when the cta is in hover status. |
--cta-button-icon-width | 24px | Icon width. |
--cta-button-icon-height | 24px | Icon height. |
--cta-button-icon-distance | 10px | Distance between the icon end the text inside the cta. |
--cta-button-icon-overflow | hidden | Icon overflow. |
--cta-button-icon-border-radius | 0 | Icon border-radius. |
--cta-button-icon-bg-color | transparent | Icon background-color. |
--cta-button-text-width | auto | Text width. |
--cta-button-text-align | center | Text align. |
CSS theme classes
Name | Description |
---|---|
.btn-block | If present on the component instance the cta take all the space available inside the container where is rendered. |
Usage/Examples
<cta-button-cmp
id="CtaButtonCmp-1"
data-aria-label="Click me"
class="primary"
data-tag="button"
data-type="button"
>
CLICK ME
</cta-button-cmp>
Screenshots
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago