Chip - Web

For development, import Chip from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Chip consists of three primary elements that work together to visually label and organize information.

Content
Close action
Custom background

Options

The Chip supports prefix icons, prefix avatars, clickable and closeable actions, and custom colors to accommodate various labeling scenarios.

Clickable

By default, a Chip is a non-clickable label. Use a clickable Chip for navigational contexts.

Close

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.

Prefix icon

Place an icon before the label to reinforce what the Chip represents. The icon uses the same color as the label. A Chip includes one prefix: an icon or an avatar.

Prefix avatar

Place an avatar before the label to identify a person. Provide an image. When that image is unavailable, initials appear from the Chip label. Follow the Avatar initials guidance for how those initials are formed.

Custom background colors

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. 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.

When a Chip is clickable, the AI mark animates on hover to draw attention to the AI-generated content.

Sizes

Size	Height	Font size
Medium	26px	14px
Small	18px	12px

Refer to the 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

With close

Overflow handling

Truncation

By default, Chips will truncate, rather than wrap.

Wrapping

Chips can be configured to individually wrap when there is not enough space.

Suggested group overflow

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.

When to Use

Use the Chip when:

Categorizing items – Items need a short label that categorizes them or adds context, such as a status or a tag.
Groups of related labels – Several labels describe the same item or set, and they sit together as a Chip group.
Navigational labels – A label also leads somewhere; use a clickable Chip for navigational contexts.
Removable labels – Users need to remove a label themselves; add a close action to the Chip.

When not to use

Avoid using the Chip for:

Something requires attention – The indicator signals that something requires attention, such as a notification; use a Badge instead.
Labeling everything on the page – Chips add visual noise to the page, so use them in moderation.

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.

Chip group

Chips are frequently paired together to form a Chip group.

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.

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	❌	✅
Part of a Side Nav	❌	✅
Part of a Combobox	✅	❌
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.

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

string

required

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.

string

Note: Only works when icon is not set

string

default:"#14141429"

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

Svg

Note: Only works when avatar is not set

() => void

Setting this will make the chip clickable and focusable.

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

(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.

"small" | "medium"

default:"medium"

boolean

Wraps text when it overflows.

​Anatomy

​Options

​Clickable

​Close

​Prefix icon

​Prefix avatar

​Custom background colors

​AI Mark

​Sizes

​Behavior

​Visual States

​Without close

​With close

​Overflow handling

​Truncation

​Wrapping

​Suggested group overflow

​Usage Guidelines

​When to Use

​When not to use

​Alternatives

​Chip vs Badge

​How to Use

​Default

​Chip group

​Color

​Choosing a Chip size

​Legend

​Content

​Keyboard Interaction

​With clickable Chip

​Accessibility

​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

Anatomy

Options

Clickable

Close

Prefix icon

Prefix avatar

Custom background colors

AI Mark

Sizes

Behavior

Visual States

Without close

With close

Overflow handling

Truncation

Wrapping

Suggested group overflow

Usage Guidelines

When to Use

When not to use

Alternatives

Chip vs Badge

How to Use

Default

Chip group

Color

Choosing a Chip size

Legend

Content

Keyboard Interaction

With clickable Chip

Accessibility

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