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