Chip

Compact badges for displaying labels, statuses, and categories

Usage

Use Chip to present compact, contextual metadata like statuses, categories, or tags. Chips can be static (informational), clickable (trigger an action or navigation), or dismissible (removable by the user).

import { Chip } from "@elemnts-ui/react";

<Chip>{...content}</Chip>;

Sizes

Change the size of the component using the size prop.

Variants

Change the component's visual style using the variant prop.

With icon

Display an icon inside the chip.

API Reference

Prop	Type	Default
size	`xs` \| `sm` \| `md` \| `lg` \| `xl`	`md`
variant	`primary` \| `secondary` \| `tertiary` \| `surface` \| `ghost`	`primary`
as	`React.ElementType`	undefined
asChild	`boolean`	undefined