Chip

Usage

The Chip component is used to represent attributes, tags, or actions in a compact form. It supports various styles, sizes, and can include leading/trailing icons or a dismiss button.

import { Chip } from "@raystack/apsara/v1";
 
<Chip variant="outline" size="small">
  Label
</Chip>;

Chip Props

Prop	Type	Default
`variant`	`"outline" \| "filled"`	`"outline"`
`size`	`"small" \| "large"`	`"small"`
`color`	`"neutral" \| "accent"`	`"neutral"`
`leadingIcon`	`ReactNode`	-
`trailingIcon`	`ReactNode`	-
`isDismissible`	`boolean`	-
`onDismiss`	`() => void`	-
`children`	`ReactNode`	-
`className`	`string`	-
`role`	`string`	`"status"`
`ariaLabel`	`string`	-

Examples

Variant

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

<Flex gap="large">
  <Chip variant="outline">Outline</Chip>
  <Chip variant="filled">Filled</Chip>
</Flex>

Size

The Chip component comes in two sizes:

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

<Flex gap="large">
  <Chip size="small">Small</Chip>
  <Chip size="large">Large</Chip>
</Flex>

Color

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

<Flex gap="large">
  <Chip color="neutral" variant="outline">
    Outline
  </Chip>
  <Chip color="neutral" variant="filled">
    Filled
  </Chip>
  <Chip color="accent" variant="outline">
    Outline
  </Chip>
  <Chip color="accent" variant="filled">
    Filled
  </Chip>
</Flex>

With Icons

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

<div style={{ display: "flex", gap: "10px" }}>
  <Chip leadingIcon={"O"}>Add Item</Chip>
  <Chip variant="filled" leadingIcon={"O"}>
    Selected
  </Chip>
</div>

Dismissible

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

<Flex gap="large">
  <Chip
    isDismissible
    onDismiss={() => alert("dismissed")}
    ariaLabel="Dismissible chip"
  >
    Dismissable Chip
  </Chip>
  <Chip
    variant="outline"
    color="accent"
    isDismissible
    onDismiss={() => alert("dismissed")}
    ariaLabel="Dismissible chip"
  >
    Dismissable Chip
  </Chip>
  <Chip
    variant="filled"
    color="accent"
    isDismissible
    onDismiss={() => alert("dismissed")}
    ariaLabel="Dismissible chip"
  >
    Dismissable Chip
  </Chip>
</Flex>

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

Chip

On this page