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 |