@forter/button NPM | npm.io

5.7.33 • Published 12 months ago

Install

Weekly downloads

108

License

Apache-2.0

Repository

Last release

12 months ago

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

web-components custom-elements

@forter/core @forter/element @forter/icon @forter/mixins

@infinitebrahmanuniverse/nolb-_fort @everything-registry/sub-chunk-338 @forter/dropdown

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago