Chip

A compact element for representing an input, attribute, or action.

Anatomy

Import and assemble the component:

1import { Chip } from "@raystack/apsara";
2

3<Chip />

Usage

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

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>
15    <Chip color="warning" variant="outline">

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>

Dismissible

Chips can be made dismissible by adding the isDismissible prop and an onDismiss handler.

1<Flex gap={9}>
2  <Chip
3    isDismissible
4    onDismiss={() => alert("dismissed")}
5    aria-label="Dismissible chip"
6  >
7    Dismissable Chip
8  </Chip>
9  <Chip
10    variant="outline"
11    color="accent"
12    isDismissible
13    onDismiss={() => alert("dismissed")}
14    aria-label="Dismissible chip"
15  >

API Reference

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

Prop

Type

The chip renders a <button> when onClick is set and it is not dismissible, and a <span> otherwise, so ref points to whichever element is rendered.

Slots

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

SlotElement
chipThe root element (<button> when interactive, <span> otherwise)
chip-leading-iconWrapper around leadingIcon (when set)
chip-trailing-iconWrapper around trailingIcon (when set and not dismissible)
chip-dismissThe dismiss button (when isDismissible)
chip-dismiss-iconThe dismiss icon (when isDismissible)

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.