fc-chip

An element for catagorizing

Usage

<script>
   import '@forter/chip';
</script>

<fc-chip>
     Chip
</fc-chip>

Examples

<!-- iconOnly -->
<fc-chip><fc-icon icon="edit"></fc-icon></fc-chip>

<!-- Icon - Intent - Success -->
<fc-chip intent="success">Approved</fc-chip>

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|--------------------------------------------------|---------|---------------------------------------------| | closeable | closeable | boolean | false | whether the chip can be closed | | closed | closed | string | | wether the chip closed | | disabled | disabled | boolean | | If the element is disabled | | intent | intent | "primary" \| "cancel" \| "success" \| "danger" \| "warn" | | The button's intent. See Intents in README. | | required | required | boolean | false | If the chip is required | | selected | selected | boolean | false | whether the chip is select able | | value | value | string | | value stored for delete event |

Events

| Event | Description | |---------|----------------------------------| | close | fired when a chip remove clicked |

CSS Custom Properties

| Property | Description | |------------------------------|------------------------------------------------| | --fc-chip-background | background color. example: gray, | | --fc-chip-border-radius | border radius. example: 25px, | | --fc-chip-close-icon-color | close icon. example: light-gray, | | --fc-chip-cursor | cursor. example: pointer, | | --fc-chip-font-size | font size. example: 12px, | | --fc-chip-height | height. example: 30px, | | --fc-chip-hover-background | hover background color. example: light-gray, | | --fc-chip-hover-color | hover text color. example: black. | | --fc-chip-padding-left | padding left. example: 10px, | | --fc-chip-padding-right | padding right. example: 10px, | | --fc-chip-width | width. example: 25px, |