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.

Demo

Closeable Chip

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

Demo

Clickable Chip

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

Demo

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.

Demo

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.

Demo

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

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

Common Examples

Basic Chip

Closeable Chip

Clickable Chip

Chip with Avatar

Chip with Icon

React Accessibility

`Chip` Props

Anvil2 Web

Resources

​Common Examples

​Basic Chip

​Closeable Chip

​Clickable Chip

​Chip with Avatar

​Chip with Icon

​React Accessibility

​Chip Props

Common Examples

Basic Chip

Closeable Chip

Clickable Chip

Chip with Avatar

Chip with Icon

React Accessibility

`Chip` Props