@forter/button

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