fc-button
An element by Forter
Usage
<script>
import '@forter/button';
</script>
<fc-button>Button</fc-button>
Examples
<!-- flat icon -->
<fc-button flat="true" icon="edit"></fc-button>
* <!-- no text -->
<fc-button icon="edit"></fc-button>
<!-- intent loading -->
<fc-button loading intent="success">Submit</fc-button>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
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
|
|
intent |
intent |
"primary" | "secondary" | "apply" | "success" | "danger" | "warn" | "cancel" |
The button's intent. See Intents in README | |
invalid |
invalid |
boolean |
false | Specify to display the x sign |
loading |
loading |
boolean |
false | If the button is loading |
valid |
valid |
boolean |
false | Specify to display the checkmark sign |
width |
width |
"small" | "medium" | "large" |
The button's preset sizes |
Events
Event | Description |
---|---|
click |
fires once value changed. example: { "target": { "checked": true } }
|
Slots
Name | Description |
---|---|
textContent for the checkbox label. example: <span> My Button </span>
|
CSS Custom Properties
Property | Description |
---|---|
--fc-button-background-color |
button background colour. |
--fc-button-border-radius |
button border radius. |
--fc-button-box-shadow |
button box shadow. example: none |
--fc-button-color |
button colour. |
--fc-button-font |
button font. example: var(--fc-font-20px-600) |
--fc-button-hover-text-color |
change flat type text color |
--fc-button-inner-margin |
button inner margin. example: 10px |
--fc-button-justify-content |
justify content. example: left |
--fc-button-min-height |
button height. example: 200px |
--fc-button-min-width |
button min-width. example: 200px |
--fc-button-text-transform |
button text transform. example: uppercase |