## Anatomy
The Chip consists of three primary elements that work together to visually label and organize information.
1. Content
2. Close action
3. Custom background
## Options
The Chip supports clickable, closeable, and customizable configurations to accommodate various labeling scenarios.
#### Clickable
```tsx lines theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return alert("chip click")} />;
}
export default App;
```
By default, a Chip is a non-clickable label. Use a clickable Chip for navigational contexts.
#### Close
```tsx lines theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return alert("chip close")} />;
}
export default App;
```
Chips can also have a close action, allowing a user to manually remove the Chip. Clickable and close can also be used together in a single Chip, but only when the size is set to medium.
#### Custom background colors
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
import { core } from "@servicetitan/anvil2/token";
function App() {
return (
);
}
export default App;
```
Chips provide one color by default. They can accept any color or Token value. Text color is auto-calculated to be the highest available contrast. It is suggested to use a Token value that supports theming.
#### AI Mark
Chips can display an AI mark icon to indicate AI-generated content.
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
By default, the AI mark uses a gradient treatment. When a custom background color is applied, the mark adapts to match the chip's text color for visual consistency.
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
When a Chip is clickable, the AI mark animates on hover to draw attention to the AI-generated content.
### Sizes
```tsx lines theme={null}
import { Chip, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Size | Height | Font size |
| ------ | ------ | --------- |
| Medium | 26px | 14px |
| Small | 18px | 12px |
Refer to the [choosing a chip size](#choosing-a-chip-size) section for more sizing recommendations.
## Behavior
The Chip responds to user interaction with distinct visual states and flexible overflow handling.
### Visual States
With custom colors, the hover background is lighter when the text is white, and darker when the text is black.
#### Without close
```tsx lines theme={null}
import { Chip, Grid } from "@servicetitan/anvil2";
function App() {
return (
alert("chip click")} />
alert("chip click")}
data-interactive="hover"
/>
alert("chip click")}
data-interactive="focus-visible"
/>
);
}
export default App;
```
#### With close
```tsx lines theme={null}
import { Chip, Grid } from "@servicetitan/anvil2";
function App() {
return (
alert("chip close")}
onClick={() => alert("chip click")}
/>
alert("chip close")}
onClick={() => alert("chip click")}
data-interactive="close-hover"
/>
alert("chip close")}
onClick={() => alert("chip click")}
data-interactive="focus-visible"
/>
);
}
export default App;
```
### Overflow handling
#### Truncation
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
alert("chip close")}
/>
);
}
export default App;
```
By default, Chips will truncate, rather than wrap.
#### Wrapping
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
alert("chip close")}
/>
);
}
export default App;
```
Chips can be configured to individually wrap when there is not enough space.
#### Suggested group overflow
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
The Chip on its own does not provide an opinion on grouping. Wrap groups first, prioritizing group wrapping before wrapping individual Chips.
## Usage Guidelines
Use the Chip when visually labeling and organizing statuses, metadata, and objects.
### Alternatives
#### Chip vs Badge
Chips are used to categorize, label, and add context to items whereas Badges are used to indicate something requires attention, such as a notification. Additionally, Chips can be interactive while Badges are not.
### How to Use
#### Default
The default Chip visually highlights elements and provides user interaction.
```tsx lines theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return (
alert("chip click")}
onClose={() => alert("chip close")}
/>
);
}
export default App;
```
### Chip group
Chips are frequently paired together to form a Chip group.
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Color
When implementing Chips, it is important to carefully consider what color is being used so that meaning and relationships are not implied when there is none.
For example, green is often meant to indicate "success" and red is used to indicate "danger" or "failure". Consistent usage is essential for helping users efficiently understand the status of something.
```tsx lines theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
import { core } from "@servicetitan/anvil2/token";
function App() {
return (
);
}
export default App;
```
**Caution**
### Choosing a Chip size
Choose a Chip size based on its relative importance within the UI. Some general suggestions for Chips are provided below.
| | Medium Chip | Small Chip |
| ---------------------------------------------------------- | ----------- | ---------- |
| Part of a [Tab](/docs/web/components/tab/design) | ❌ | ✅ |
| Part of a [Side Nav](/docs/web/components/side-nav/design) | ❌ | ✅ |
| Part of a [Combobox](/docs/web/components/combobox/design) | ✅ | ❌ |
| Table Cell main content | ✅ | ⚠️ |
| Table Cell secondary content | ⚠️ | ✅ |
| Group of Chips on the page | ✅ | ⚠️ |
| Chip(s) in the page header | ✅ | ⚠️ |
| Needing an interactive Chip + close | ✅ | ❌ |
#### Legend
✅ recommended
⚠️ use with caution
❌ do not use
## Content
Content within the Chip should be short and descriptive, helping users understand context at a glance.
* Chips should be short and descriptive. Users should understand context at a glance.
* Use both color and text together to provide meaning so that color alone is not the only indicator of meaning.
* Use Chips in moderation as they add visual noise to the page.
* Chips may be used for both textual and numerical content.
## Keyboard Interaction
Users can navigate the Chip using standard keyboard controls.
#### With clickable Chip
| Key | Description |
| ------------------- | ------------------------------------------------------------- |
| Enter | Engages the Chip and moves focus to the click target. |
| Backspace or Delete | If the close action exists, removes the Chip from the screen. |
### Accessibility
The Chip provides all accessibility needs out of the box. With custom background colors, the Chip will automatically provide a text color that will be at least a 4.5:1 ratio, satisfying WCAG AA requirements.
For more guidance on accessible interaction components, see [button accessibility best practices](/docs/accessibility/labels-and-ctas#buttons-and-links).
