Chip
A compact element for representing an input, attribute, or action.
My Chip
<Chip>My Chip</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.
OutlineFilled
<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 paddinglarge
: More spacious with increased padding
SmallLarge
<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.
OutlineFilledOutlineFilled
<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.
Add Item Selected
<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.
Dismissable ChipDismissable ChipDismissable Chip
<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