2.0.6 • Published 9 months ago

@frankhoodbs/cta-button-cmp v2.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

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.

Version License

API Reference

Props

NameTypeDescription
data-tagstringTag of the button. Can be one of the following: a, button, router-link.
data-urlstringIf data-tag is a, the href of the tag a.
data-downloadbooleanIndicates that the link is a file to download.
data-filenamestringThe file to download.
data-targetstringIf data-tag is a, the target of the tag a.
data-relstringIf data-tag is a, the rel of the tag a.
data-referrerpolicystringIf data-tag is a, the referrerpolicy of the tag a.
data-typestringIf data-tag is button, the type of the tag button.
data-tostring or objectIf data-tag is router-link, the to attribute of the router-link.
data-aria-labelstringThe value of the aria-label.
data-disabledbooleanIndicates that the cta is disabled.
data-loadingbooleanIndicates that the action triggered by the cta is in progress.

Slots

Slot NameDescription
defaultText inside cta
before-iconIcon SVG before the text
after-iconIcon SVG after the text
loading-iconLoading icon svg

CSS variables

NamedefaultDescription
--cta-button-displayinline-flexValue of the display property. Should be flex or inline-flex.
--cta-button-align-itemscenterValue of the align-items property.
--cta-button-justify-contentcenterValue of the justify-content property.
--cta-button-widthautoCta width.
--cta-button-heightautoCta height.
--cta-button-padding1.5rem 3remCta padding.
--cta-button-border-width1pxBorder width.
--cta-button-border-stylesolidBorder style.
--cta-button-border-colornavyBorder color.
--cta-button-border-radius0Cta border-radius.
--cta-button-bg-colornavyCta background-color.
--cta-button-box-shadownoneCta box-shadow.
--cta-button-colorwhiteCta color.
--cta-button-font-weightinheritCta font-weight.
--cta-button-font-sizeinheritCta font-size.
--cta-button-line-heightnormalCta line-height.
--cta-button-font-familyinheritCta font-family.
--cta-button-text-decorationnoneCta text-decoration.
--cta-button-cursorpointerCta cursor.
--cta-button-opacity1Cta opacity.
--cta-button-disabled-border-width1Border width when the cta is disabled.
--cta-button-disabled-border-stylesolidBorder style when the cta is disabled.
--cta-button-disabled-border-colornavyBorder color when the cta is disabled.
--cta-button-disabled-bg-colornavyBackground-color when the cta is disabled.
--cta-button-disabled-box-shadownoneBox-shadow when the cta is disabled.
--cta-button-disabled-color#000000Color when the cta is disabled.
--cta-button-disabled-text-decorationwhiteText-decoration when the cta is disabled.
--cta-button-disabled-cursornot-allowedCursor when the cta is disabled.
--cta-button-disabled-opacity0.333Opacity when the cta is disabled.
--cta-button-hover-border-width1Border width when the cta is in hover status.
--cta-button-hover-border-stylesolidBorder style when the cta is in hover status.
--cta-button-hover-border-colornavyBorder color when the cta is in hover status.
--cta-button-hover-bg-colornavyBackground-color when the cta is in hover status.
--cta-button-hover-box-shadownoneBox-shadow when the cta is in hover status.
--cta-button-hover-colorwhiteColor when the cta is in hover status.
--cta-button-hover-text-decorationnoneText-decoration when the cta is in hover status.
--cta-button-hover-opacity1Opacity when the cta is in hover status.
--cta-button-icon-width24pxIcon width.
--cta-button-icon-height24pxIcon height.
--cta-button-icon-distance10pxDistance between the icon end the text inside the cta.
--cta-button-icon-overflowhiddenIcon overflow.
--cta-button-icon-border-radius0Icon border-radius.
--cta-button-icon-bg-colortransparentIcon background-color.
--cta-button-text-widthautoText width.
--cta-button-text-aligncenterText align.

CSS theme classes

NameDescription
.btn-blockIf 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

Component Screenshot

2.0.6

9 months ago

2.0.3

9 months ago

2.0.2

9 months ago

2.0.5

9 months ago

2.0.4

9 months ago

1.4.21

10 months ago

2.0.1

9 months ago

1.4.20

10 months ago

1.4.19

10 months ago

1.4.9

12 months ago

1.4.11

12 months ago

1.4.10

12 months ago

1.4.13

12 months ago

1.4.12

12 months ago

1.4.15

12 months ago

1.4.14

12 months ago

1.4.17

12 months ago

1.4.16

12 months ago

1.4.18

12 months ago

1.4.4

1 year ago

1.4.8

1 year ago

1.4.7

1 year ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.3.17

1 year ago

1.3.14

1 year ago

1.3.15

1 year ago

1.3.16

1 year ago

1.3.13

1 year ago

1.3.11

1 year ago

1.3.12

1 year ago

1.3.10

1 year ago

1.3.9

1 year ago

1.3.8

1 year ago

1.3.7

1 year ago

1.3.6

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

2 years ago

1.2.0

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.31

2 years ago

1.1.38

2 years ago

1.1.37

2 years ago

1.1.36

2 years ago

1.1.39

2 years ago

1.1.41

2 years ago

1.1.40

2 years ago

1.1.44

2 years ago

1.2.10

2 years ago

1.1.43

2 years ago

1.1.42

2 years ago

1.2.9

2 years ago

1.1.30

2 years ago

1.1.29

2 years ago

1.1.28

2 years ago

1.1.26

2 years ago

1.1.25

2 years ago

1.1.24

2 years ago

1.1.23

2 years ago

1.1.22

2 years ago

1.1.21

2 years ago

1.1.20

2 years ago

1.1.19

2 years ago

1.1.18

2 years ago

1.1.17

2 years ago

1.1.16

2 years ago

1.1.15

2 years ago

1.1.14

2 years ago

1.1.13

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.4

2 years ago

1.1.1

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago