Chip – Code

Implementation
Chip Props

Common Examples

import { Chip } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Chip
      label="Cassian Andor"
      size="medium"
      color="#3e3e5f"
      onClick={console.log}
      onClose={console.log}
    />
  );
}

Basic Chip

Chip components must at least have their label prop defined, which will define the text that is displayed within the Chip.

Closeable Chip

Adding an onClose prop handler to the Chip component will render a clickable close button alongside the Chip.

Clickable Chip

Adding an onClick prop handler to the Chip component will render the text inside the Chip as a clickable button.

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.

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.

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.

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.

AI Mark with Interactive Chips

When aiMark is used with onClick, the AI mark will animate when the chip is hovered or focused.

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.

<Chip
  label="Cassian Andor"
  avatar="https://example.com/avatar.jpg"
  color="#3e3e5f"
  icon={StarIcon}
  size="medium"
  onClick={() => console.log("Clicked")}
  onClose={(e) => console.log("Closed")}
/>

`Chip` Props

label

string

required

aiMark

boolean

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.

avatar

string

Note: Only works when icon is not set

color

string

default:"#14141429"

Several color formats work, such as HEX, RGB, HSL, HSV, etc.

icon

Svg

Note: Only works when avatar is not set

onClick

() => void

Setting this will make the chip clickable and focusable.

When size="small", only one of onClick or onClose can be used, not both.

onClose

(e: MouseEvent | KeyboardEvent) => void

Setting this will render the chip’s close button.

When size="small", only one of onClick or onClose can be used, not both.

size

"small" | "medium"

default:"medium"

textWrap

boolean

Wraps text when it overflows.

Anvil2 Web

Resources

Chip – Code

Common Examples

Basic Chip

Closeable Chip

Clickable Chip

Chip with Avatar

Chip with Icon

Chip with AI Mark

AI Mark with Color

AI Mark with Interactive Chips

React Accessibility

`Chip` Props

Anvil2 Web

Resources

​Common Examples

​Basic Chip

​Closeable Chip

​Clickable Chip

​Chip with Avatar

​Chip with Icon

​Chip with AI Mark

​AI Mark with Color

​AI Mark with Interactive Chips

​React Accessibility

​Chip Props

Common Examples

Basic Chip

Closeable Chip

Clickable Chip

Chip with Avatar

Chip with Icon

Chip with AI Mark

AI Mark with Color

AI Mark with Interactive Chips

React Accessibility

`Chip` Props