Chip

The Chip component displays a compact piece of information. It’s built on the Surface component and is ideal for tags, categories, or filters.

<Chip label="Loggerhead Kingbird" />

Features

Emphasis

Chips can be styled with different variants, inherited from the Surface component, to match the visual hierarchy of your application.

<Row gap={400} wrap="wrap">
  <Chip variant="highest" label="Hawfinch" />
  <Chip variant="high" label="Greater Shearwater" />
  <Chip variant="medium" label="Black-headed Grosbeak" />
  <Chip variant="low" label="Seaside Sparrow" />
  <Chip variant="lowest" label="Murphy's Petrel" />
</Row>

Color

Chips can be styled with different variants, inherited from the Surface component, to match the visual hierarchy of your application.

<Row gap={400} wrap="wrap">
  <Chip variant="info" label="White-eyed Vireo" />
  <Chip variant="success" label="Willet" />
  <Chip variant="error" label="Harlequin Duck" />
  <Chip variant="warning" label="White-eared Hummingbird" />
</Row>

Shape

You can customize the shape of the Chip using the shape prop, which is also inherited from the Surface component.

<Row gap={400} wrap="wrap">
  <Chip shape="stadium" label="Yellow-bellied Sapsucker" />
  <Chip shape="rounded" label="Oriental Scops-Owl" />
  <Chip shape="square" label="Mountain Quail" />
</Row>

Interactive

You can make a Chip interactive by adding an onClick handler.

<Chip label="Murphy's Petrel" onClick={() => alert("Chip clicked")} />

Anatomy

Siberian Flycatcher

1.SurfaceThe main container for the chip.

2.LabelThe text content of the chip.

Reference

Props

Name	Type	Default	Description
`label`	`Text`	-	The text content of the chip.

The Chip component also inherits all props from the Surface component.