Package Exports
- @forter/button
- @forter/button/build/index.js
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>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 |