Chip

The Chip component can be used to display content in a compact and colorful box. Chips are best used to display a single value, a small amount of text, or an icon. For example, chips can be used to display tags in a table.

Basic usage

 
tsx
Copied
1
<Stack direction="row" spacing="sm">
2
  <Chip>Paris</Chip>
3
  <Chip>New York</Chip>
4
  <Chip>Cape Town</Chip>
5
  <Chip>Bangkok</Chip>
6
  <Chip>São Paulo</Chip>
7
</Stack>

Variant, size, and color
The look and feel of the chip can be easily changed.
tsx
Copied
1
<Stack>
2
  <Stack direction="row" spacing="sm">
3
    <Chip variant="light">Paris</Chip>
4
    <Chip variant="filled">New York</Chip>
5
    <Chip variant="outline">Cape Town</Chip>
6
  </Stack>
7
  <Stack direction="row" spacing="sm">
8
    <Chip size="sm">Paris</Chip>
9
    <Chip size="md">New York</Chip>
10
    <Chip size="lg">Cape Town</Chip>
11
  </Stack>
12
  <Stack direction="row" spacing="sm">
13
    <Chip color="success">Paris</Chip>
14
    <Chip color="orange">New York</Chip>
15
    <Chip color="violet">Cape Town</Chip>
16
  </Stack>
17
</Stack>

Auto color
The color of the chip is automatically determined based on the text with color set to auto. This is useful if you want to display a list of tags.
tsx
Copied
1
<Chip color="auto">Dine-in</Chip>
2
<Chip color="auto">Plant-based</Chip>
3
<Chip color="auto">Juice</Chip>

Component API
children
optional
React.ReactNode

Chip contents.

color
optional
Default
primary
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | "auto"

Color of the chip.

"auto" will automatically choose a color for string or number children.

size
optional
Default
md
"sm" | "md" | "lg"

Size of the chip.

variant
optional
Default
light
"filled" | "outline" | "light"

Appearance of the chip.

PrivacyTermsSupport