Chip
Chips represent compact pieces of information and can optionally include leading and trailing content. They are commonly used for filtering, tagging, categorisation, and selected values.
Quick Start
Use a Chip to display a compact label, category, filter, or selected value.
Chip
1import { Chip } from "@ecos/ui"; 2 3<Chip> 4 Chip 5</Chip>
Variants
Chips support default, label, and outline variants.
Default | Label | Outline |
|---|---|---|
Chip | Chip | Chip |
1<Chip> 2 Chip 3</Chip> 4 5<Chip variant="label"> 6 Chip 7</Chip> 8 9<Chip variant="outline"> 10 Chip 11</Chip>
Leading Content
Use leftContent to display avatars, icons, status indicators, or custom content before the chip label.
JDChip
1<Chip 2 leftContent={ 3 <Avatar size="sm"> 4 <AvatarFallback> 5 JD 6 </AvatarFallback> 7 </Avatar> 8 } 9> 10 Chip 11</Chip>
Trailing Content
Use rightContent to display actions, indicators, counts, or custom content.
Chip
1<Chip 2 rightContent={ 3 <XCircle /> 4 } 5> 6 Chip 7</Chip>
Leading and Trailing Content
Leading and trailing content can be combined.
JDChip
1<Chip 2 leftContent={ 3 <Avatar size="sm"> 4 <AvatarFallback> 5 JD 6 </AvatarFallback> 7 </Avatar> 8 } 9 rightContent={ 10 <XCircle /> 11 } 12> 13 Chip 14</Chip>
API Reference
Property | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "label" | "outline" | "default" | Controls the visual appearance of the chip. |
| leftContent | ReactNode | - | Content displayed before the chip label. |
| rightContent | ReactNode | - | Content displayed after the chip label. |
| children | ReactNode | - | Content displayed within the chip. |
| className | string | - | Additional CSS classes applied to the chip. |
Visual Reference
Configuration | Preview |
|---|---|
| Default | Chip |
| Label | Chip |
| Outline | Chip |
| Leading Content | JDChip |
| Trailing Content | Chip |
| Leading & Trailing Content | JDChip |