Package Exports
- @forter/button
- @forter/button/src/fc-button-shared.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
fc-button
An element by Forter
Usage
<script>
import '@forter/button';
</script>
<fc-button>Button</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 |
"success" | "apply" | "danger" | "cancel" | "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. example: aqua |
--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 by Forter
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 |