Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@forter/button

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@forter/button

Button from Forter Components


Version published
Weekly downloads
23
decreased by-69.33%
Maintainers
3
Weekly downloads
 
Created

fc-button

An element by Forter

Usage

<script>
   import '@forter/button';
</script>

<fc-button>Button</fc-button>

Examples

<!-- iconOnly -->
<fc-button intent="cancel" flat="true" icon="admin"></fc-button>

Properties

PropertyAttributeTypeDefaultDescription
activeactivebooleanfalseIf the button is active
disableddisabledbooleanfalseIf the button is disabled
flatflatbooleanfalseflatness of the button
iconiconstringThe button's icon. example: admin, default: forter
iconSizeicon-sizestring | number18The icon's icon-size
intentintent"primary" | "secondary" | "success" | "apply" | "danger" | "warn"The button's intent. See Intents in README.
labellabelstringThe button's label, used when accessible content is not slotted in.
secondaryIconsecondary-iconstring""The button's secondary icon. example: edit

Slots

NameDescription
like: <span> My Button </span>

CSS Custom Properties

PropertyDescription
--fc-button-active-background-colorbutton background colour when active.
--fc-button-active-border-colorbutton border colour when active.
--fc-button-active-box-shadowbutton box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-colorbutton colour when active.
--fc-button-active-icon-coloricon colour when active.
--fc-button-background-colorbutton background colour.
--fc-button-border-radiusbutton border radius.
--fc-button-box-shadowbutton box shadow.
--fc-button-focus-border-colorbutton border colour when focused.
--fc-button-heightbutton height.
--fc-button-hover-background-colorbutton background colour when hovered.
--fc-button-hover-box-shadowbutton box-shadow colour when hovered.
--fc-button-hover-colorbutton box-shadow colour when hovered.
--fc-button-hover-icon-coloricon colour when hovered.
--fc-button-icon-coloricon colour. example: coral
--fc-button-inner-marginbutton inner margin.
--fc-button-min-widthbutton min-width. default: 35px;
--fc-button-outer-marginbutton outer margin.
--fc-button-text-transformbutton text transform.

fc-icon-button

Accessible icon button with discreet default styles

Usage

<fc-icon-button></fc-icon-button>

Properties

PropertyAttributeTypeDefaultDescription
activeactivebooleanfalseIf the button is active
disableddisabledbooleanfalseIf the button is disabled
iconiconstringThe button's icon
labellabelstringThe button's label. Must be passed for accessibility.

CSS Custom Properties

PropertyDescription
--fc-button-active-background-colorbutton background colour when active.
--fc-button-active-border-colorbutton border colour when active.
--fc-button-active-box-shadowbutton box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-colorbutton colour when active.
--fc-button-active-icon-coloricon colour when active.
--fc-button-background-colorbutton background colour.
--fc-button-border-radiusbutton border radius.
--fc-button-box-shadowbutton box shadow.
--fc-button-focus-border-colorbutton border colour when focused.
--fc-button-heightbutton height.
--fc-button-hover-background-colorbutton background colour when hovered.
--fc-button-hover-box-shadowbutton box-shadow colour when hovered.
--fc-button-hover-colorbutton box-shadow colour when hovered.
--fc-button-hover-icon-coloricon colour when hovered.
--fc-button-icon-coloricon colour.
--fc-button-inner-marginbutton inner margin.
--fc-button-min-widthbutton min-width. default: 35px;
--fc-button-outer-marginbutton outer margin.
--fc-button-text-transformbutton text transform.

fc-speech

An element to record and translate it to text

Usage

  <script>
   import '@forter/button';
</script>

<fc-speech></fc-speech>

Properties

PropertyAttributeTypeDescription
completeTranscriptcompleteTranscriptstringThe completed transcript
continuouscontinuousbooleanIf recording should be continuous
interimResultsinterim-resultsbooleanIf results should be streamed as they are produced
languagelanguagestringThe language to use when recognizing
recognizingrecognizinganyWhether the component is recognizing speech
transcripttranscriptany

Events

EventDescription
resultthe outcome of voice recording

FAQs

Package last updated on 08 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts