Chip

Anatomy

Import and assemble the component:

1import { Chip } from "@raystack/apsara";
2
3<Chip>
4  <Chip.Remove />
5</Chip>

Usage

Appearance first, meaning variant, size and color, then the two things a chip can carry: icons and a remove button.

Variant

Choose between outline and filled variants to match your design needs.

1<Flex gap={9}>
2  <Chip variant="outline">Outline</Chip>
3  <Chip variant="filled">Filled</Chip>
4</Flex>

Size

Two sizes. large is the default; small fits inside inputs and table cells.

• small: Compact size with less padding
• large: More spacious with increased padding

1<Flex gap={9}>
2  <Chip size="small">Small</Chip>
3  <Chip size="large">Large</Chip>
4</Flex>

Color

Five colors. neutral and accent set emphasis. danger, success and warning show status.

1<Flex direction="column" gap={5}>
2  <Flex gap={9}>
3    <Chip color="neutral" variant="outline">
4      Neutral
5    </Chip>
6    <Chip color="accent" variant="outline">
7      Accent
8    </Chip>
9    <Chip color="danger" variant="outline">
10      Danger
11    </Chip>
12    <Chip color="success" variant="outline">
13      Success
14    </Chip>

With icons

Chips can include leading and trailing icons to provide additional context or actions.

1<div style={{ display: "flex", gap: "10px" }}>
2  <Chip leadingIcon={"O"}>Add Item</Chip>
3  <Chip variant="filled" leadingIcon={"O"} data-state="active">
4    Selected
5  </Chip>
6</div>

Remove button

Add Chip.Remove as the last child to show a remove button. Handle the removal in its onClick. The button is named "Remove" plus the chip text, and it is disabled when the chip is disabled.

1<Flex gap={9}>
2  <Chip>
3    Removable Chip
4    <Chip.Remove onClick={() => alert("removed")} />
5  </Chip>
6  <Chip variant="outline" color="accent">
7    Removable Chip
8    <Chip.Remove onClick={() => alert("removed")} />
9  </Chip>
10  <Chip variant="filled" color="accent">
11    Removable Chip
12    <Chip.Remove onClick={() => alert("removed")} />
13  </Chip>
14</Flex>

To render the button as another element, pass render. For example, Combobox renders it as Base UI's Combobox.ChipRemove.

API Reference

Renders a compact element for tags, labels, or attributes.

The chip renders a <button> when onClick is set and it has no Chip.Remove child, and a <span> otherwise, so ref points to whichever element is rendered.

Remove Props

A button that removes the chip. Place it as a direct child of Chip.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Accessibility

The Chip component has some accessibility features:

• Uses semantic HTML elements
• Includes proper ARIA roles and labels
• Provides keyboard navigation support
• Makes decorative elements hidden from screen readers
• Keeps contrast ratios correct in all variants and states

children is optional, so a chip can be icon-only. When you omit children, pass an aria-label. The chip derives its label from string children, so without one it has no accessible name.