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

DefaultAccentWith IconDismissible

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.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Chip } from '@raystack/apsara/v1'

<Chip variant="outline" size="small">Label</Chip>

Chip Props

The Chip component accepts the following props:

variant: Visual style variant ("outline" | "filled", default: "outline")
size: Size of the chip ("small" | "large", default: "small")
style: Color style ("neutral" | "accent", default: "neutral")
leadingIcon: ReactNode to display as an icon before the label
trailingIcon: ReactNode to display as an icon after the label
isDismissible: Boolean to show a dismiss button (replaces trailingIcon)
onDismiss: Callback function when dismiss button is clicked
children: Content to display inside the chip
className: Additional CSS class names
role: ARIA role for the chip (default: "status")
ariaLabel: Custom accessibility label for the chip

Variants

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

Sizes

The Chip component comes in two sizes:

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

Styles

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

With Icons

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

Dismissible

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

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