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

DefaultAccentOWith 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

Variants

Choose between outline and filled variants to match your design needs. The only major difference is that filled chips have a background color.

Sizes

The Chip component comes in two sizes to accommodate different use cases.

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.