npm package: @forter/chip
Description: chip from Forter Components
Author: Forter Developers
Latest version: 1.5.1

# fc-chip

An element for catagorizing
<!-- Author: Yuval Krinberg <yuval.krinberg@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-chip--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fchip) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chip/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/chip) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chip/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/chip) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chip/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/chip)

## Usage

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

<fc-chip>
     Chip
</fc-chip>
```
## Examples

```html
<!-- 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`,                        |