Chip

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

Usage

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

Chip Props

Prop

Type

Examples

Variant

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

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

Size

The Chip component comes in two sizes:

  • small: Compact size with less padding
  • large: More spacious with increased padding
1<Flex gap="large">
2  <Chip size="small">Small</Chip>
3  <Chip size="large">Large</Chip>
4</Flex>

Color

Choose between neutral and accent styles to control the visual emphasis.

1<Flex gap="large">
2  <Chip color="neutral" variant="outline">
3    Outline
4  </Chip>
5  <Chip color="neutral" variant="filled">
6    Filled
7  </Chip>
8  <Chip color="accent" variant="outline">
9    Outline
10  </Chip>
11  <Chip color="accent" variant="filled">
12    Filled
13  </Chip>
14</Flex>

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"}>
4    Selected
5  </Chip>
6</div>

Dismissible

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

1<Flex gap="large">
2  <Chip
3    isDismissible
4    onDismiss={() => alert("dismissed")}
5    ariaLabel="Dismissible chip"
6  >
7    Dismissable Chip
8  </Chip>
9  <Chip
10    variant="outline"
11    color="accent"
12    isDismissible
13    onDismiss={() => alert("dismissed")}
14    ariaLabel="Dismissible chip"
15  >
16    Dismissable Chip
17  </Chip>
18  <Chip
19    variant="filled"
20    color="accent"
21    isDismissible
22    onDismiss={() => alert("dismissed")}
23    ariaLabel="Dismissible chip"
24  >
25    Dismissable Chip
26  </Chip>

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
  • Ensures proper contrast ratios in all variants and states