@forter/button

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

Property	Attribute	Type	Default	Description
active	active	boolean	false	If the button is active
disabled	disabled	boolean	false	If the button is disabled
flat	flat	boolean	false	flatness of the button
icon	icon	string		The button's icon. example: admin, default: forter
iconSize	icon-size	string | number	18	The icon's icon-size
intent	intent	"primary" | "secondary" | "success" | "apply" | "danger" | "warn"		The button's intent. See Intents in README.
label	label	string		The button's label, used when accessible content is not slotted in.
secondaryIcon	secondary-icon	string	""	The button's secondary icon. example: edit

Slots

Name	Description
	like: <span> My Button </span>

CSS Custom Properties

Property	Description
--fc-button-active-background-color	button background colour when active.
--fc-button-active-border-color	button border colour when active.
--fc-button-active-box-shadow	button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-color	button colour when active.
--fc-button-active-icon-color	icon colour when active.
--fc-button-background-color	button background colour.
--fc-button-border-radius	button border radius.
--fc-button-box-shadow	button box shadow.
--fc-button-focus-border-color	button border colour when focused.
--fc-button-height	button height.
--fc-button-hover-background-color	button background colour when hovered.
--fc-button-hover-box-shadow	button box-shadow colour when hovered.
--fc-button-hover-color	button box-shadow colour when hovered.
--fc-button-hover-icon-color	icon colour when hovered.
--fc-button-icon-color	icon colour. example: coral
--fc-button-inner-margin	button inner margin.
--fc-button-min-width	button min-width. default: 35px;
--fc-button-outer-margin	button outer margin.
--fc-button-text-transform	button text transform.

fc-icon-button

Accessible icon button with discreet default styles

Usage

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

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	false	If the button is active
disabled	disabled	boolean	false	If the button is disabled
icon	icon	string		The button's icon
label	label	string		The button's label. Must be passed for accessibility.

CSS Custom Properties

Property	Description
--fc-button-active-background-color	button background colour when active.
--fc-button-active-border-color	button border colour when active.
--fc-button-active-box-shadow	button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)
--fc-button-active-color	button colour when active.
--fc-button-active-icon-color	icon colour when active.
--fc-button-background-color	button background colour.
--fc-button-border-radius	button border radius.
--fc-button-box-shadow	button box shadow.
--fc-button-focus-border-color	button border colour when focused.
--fc-button-height	button height.
--fc-button-hover-background-color	button background colour when hovered.
--fc-button-hover-box-shadow	button box-shadow colour when hovered.
--fc-button-hover-color	button box-shadow colour when hovered.
--fc-button-hover-icon-color	icon colour when hovered.
--fc-button-icon-color	icon colour.
--fc-button-inner-margin	button inner margin.
--fc-button-min-width	button min-width. default: 35px;
--fc-button-outer-margin	button outer margin.
--fc-button-text-transform	button text transform.

fc-speech

An element to record and translate it to text

Usage

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

<fc-speech></fc-speech>

Properties

Property	Attribute	Type	Description
completeTranscript	completeTranscript	string	The completed transcript
continuous	continuous	boolean	If recording should be continuous
interimResults	interim-results	boolean	If results should be streamed as they are produced
language	language	string	The language to use when recognizing
recognizing	recognizing	any	Whether the component is recognizing speech
transcript	transcript	any

Events

Event	Description
result	the outcome of voice recording