@frankhoodbs/cta-button-cmp NPM

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>