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

@forter/button

Package Overview
Dependencies
Maintainers
3
Versions
147
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@forter/button

Button from Forter Components

  • 5.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
116
increased by1060%
Maintainers
3
Weekly downloads
 
Created
Source

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 by Forter

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

Keywords

FAQs

Package last updated on 26 Dec 2019

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc