;
}
};
```tsx lines expandable theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return (
alert("chip click")}
onClose={() => alert("chip close")}
/>
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Chip } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
### Basic Chip
`Chip` components must at least have their `label` prop defined, which will define the text that is displayed within the `Chip`.
```tsx lines expandable theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Closeable Chip
Adding an `onClose` prop handler to the `Chip` component will render a clickable close button alongside the `Chip`.
```tsx lines expandable theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return alert("chip close")} />;
}
export default App;
```
### Clickable Chip
Adding an `onClick` prop handler to the `Chip` component will render the text inside the `Chip` as a clickable button.
```tsx lines expandable theme={null}
import { Chip } from "@servicetitan/anvil2";
function App() {
return alert("chip click")} />;
}
export default App;
```
### Chip with Avatar
Adding an `avatar` prop with a URL to an image will render an `Avatar` inside of the `Chip` as a prefix before the label. Note that the `avatar` prop cannot be used with the `icon` prop.
```tsx lines expandable theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
import dog01 from "../assets/dog-01.png";
import dog02 from "../assets/dog-02.png";
function App() {
return (
);
}
export default App;
```
### Chip with Icon
Adding an `icon` prop with an imported SVG will render an `Icon` inside of the `Chip` as a prefix before the label. Note that the `icon` prop cannot be used with the `avatar` prop.
```tsx lines expandable theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
import Info from "@servicetitan/anvil2/assets/icons/material/round/info.svg";
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
function App() {
return (
);
}
export default App;
```
### Chip with AI Mark
Adding the `aiMark` prop displays the `AiMark` icon inside the chip to indicate AI-generated content. On default chips (no color), a gradient AI mark is shown. On colored chips, the AI mark inherits the chip's text color.
```tsx lines expandable theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### AI Mark with Color
When a `color` prop is set alongside `aiMark`, the AI mark uses the default type, inheriting the chip's text color for visual cohesion.
```tsx lines expandable theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### AI Mark with Interactive Chips
When `aiMark` is used with `onClick`, the AI mark will animate when the chip is hovered or focused.
```tsx lines expandable theme={null}
import { Chip, Flex } from "@servicetitan/anvil2";
function App() {
return (
alert("chip click")}
/>
alert("chip close")}
/>
alert("chip click")}
onClose={() => alert("chip close")}
/>
);
}
export default App;
```
## React Accessibility
* The `Chip` component won't be focusable unless it has an `onClick` or `onClose` prop handler defined.
For more guidance on accessible interaction components, see [button accessibility best practices](/docs/accessibility/labels-and-ctas#buttons-and-links).
```tsx theme={null}
console.log("Clicked")}
onClose={(e) => console.log("Closed")}
/>
```
## `Chip` Props
Displays an AI mark icon in the chip to indicate AI-generated content. Uses gradient style on default chips and inherited color style on colored chips.
**Note:** Only works when `icon` is not set
Several color formats work, such as HEX, RGB, HSL, HSV, etc.
**Note:** Only works when `avatar` is not set
Setting this will make the chip clickable and focusable.
When `size="small"`, only one of `onClick` or `onClose` can be used, not both.
Setting this will render the chip's close button.
When `size="small"`, only one of `onClick` or `onClose` can be used, not both.
Wraps text when it overflows.
