Components
CrystalChip
A compact element for tags, filters, or selections.
CrystalChip renders a small, pill-shaped label with optional icon, trailing element, and close button. Supports status variants (success, warning, error) and three sizes.
Import
import { CrystalChip } from '@artasce/crystal-ui';Usage
<CrystalChip label="TypeScript" />
<CrystalChip label="Active" variant="success" />
<CrystalChip label="Removable" onClose={() => handleRemove()} />Props
CrystalChip Props
| Token | Variable | Value |
|---|---|---|
label | string | (required) |
icon | React.ReactNode | — |
trailing | React.ReactNode | — |
variant | 'default' | 'accent' | 'success' | 'warning' | 'error' | 'default' |
size | 'sm' | 'md' | 'lg' | 'md' |
onClick | () => void | — |
onClose | () => void | — |
disabled | boolean | false |
className | string | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Variants
Status Chips
Use status variants to indicate state:
<CrystalChip label="Online" variant="success" />
<CrystalChip label="Pending" variant="warning" />
<CrystalChip label="Failed" variant="error" />
<CrystalChip label="Featured" variant="accent" />With Icon
import { Tag } from 'lucide-react';
<CrystalChip icon={<Tag size={14} />} label="Category" />Removable
When onClose is provided, a close button appears:
<CrystalChip
label="Filter: Active"
onClose={() => removeFilter('active')}
/>Token Usage
| Property | Token |
|---|---|
| Border radius | --crystal-radius-full |
| Transition | --crystal-motion-duration-fast + --crystal-motion-easing-easeOut |
| Background (default) | --crystal-color-crystal-background-secondary |
| Border (default) | --crystal-color-crystal-border-default |
| Background (accent) | --crystal-color-crystal-accent-subtle |
Theme Comparison
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent