## Import

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

## Live Editor

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

## Guidelines

### When to use

- Chip is for text labels that categorize or tag items, especially when the label is too long for Badge.

### Do

- Keep labels short and in sentence case.

### Avoid

- Using Chip to apply filters. Use TagGroup for active filters.
- Using Chip as a primary action. Use Button or Link for actions.
- Using Chip for numeric counts on icons, buttons, tabs, or navigation. Use Badge.
- Piling up dozens of static chips. Use TagGroup for related sets or a summary representation.
- Wrapping text inside a 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" | "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="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: `"subtle"` by default and `"outlined"`. Each color supports both variants.

```jsx
<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
  <Chip color="success">Subtle</Chip>
  <Chip variant="outlined" color="success">
    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" \ | "darkGreen" \ | "error" \ | "gray" \ | "lightOrange" \ | "orange" \ | "pink" \ | "purple" \ | "success" \ | "warning"` | `blue` | 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. Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |
| variant | `"outlined" \ | "subtle"` | `subtle` | Variant for the chip.&#xA;&#xA;\`outlined\` uses the default background and a colored border. \`subtle\` uses a lighter filled background. |