## Import

```jsx
import { Chip } from "@cfa/react-core";
```

## Live Editor

```jsx
<Chip>label</Chip>
```

## Examples

### Color

There are several color variations with the Chip component, with blue as the default.

The following options are also available: `"cream" | "pink" | "lightOrange" | "orange" | "darkGreen" | "navy" | "purple" | "gray" | "success" | "warning" | "error"`.

```jsx
<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
  <Chip>Blue</Chip>
  <Chip color="cream">Cream</Chip>
  <Chip color="pink">Pink</Chip>
  <Chip color="lightOrange">Light Orange</Chip>
  <Chip color="orange">Orange</Chip>
  <Chip color="darkGreen">Dark Green</Chip>
  <Chip color="navy">Navy</Chip>
  <Chip color="purple">Purple</Chip>
  <Chip color="gray">Gray</Chip>
  <Chip color="success">Success</Chip>
  <Chip color="warning">Warning</Chip>
  <Chip color="error">Error</Chip>
</div>
```

### Variant

The Chip component has two variants: `"filled"` by default, and `"outlined"`.

```jsx
<div style={{ display: "flex", gap: 8 }}>
  <Chip variant="filled">Filled</Chip>
  <Chip variant="outlined">Outlined</Chip>
</div>
```

### Leading Element

The Chip component can have a leading element, such as an icon.

```jsx
<Chip>
  <Alarm />
  Label
</Chip>
```

## Props

### Chip

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode` | - | The chip content or label. |
| className | `string` | - | CSS class names to apply custom styling. |
| color | `"blue" \ | "cream" \ | "pink" \ | "lightOrange" \ | "orange" \ | "darkGreen" \ | "navy" \ | "purple" \ | "gray" \ | "success" \ | "warning" \ | "error"` | `false` | The color of the chip. |
| id | `string` | - | The unique identifier for the DOM element. |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility.&#xA;Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |
| variant | `"filled" \ | "outlined"` | `filled` | Variant for the chip. |