Components
Chip
Inline status label for short text marks, state flags and filter tags — carries all system status color semantics in one place.
Installation
- $npx litefy@latest add chip
- $pnpm dlx litefy@latest add chip
- $yarn dlx litefy@latest add chip
- $bun --bun litefy@latest add chip
Usage
Inline status label with six semantic variants — use Badge for attached markers instead.
outlineprimarysuccesswarningdangerinfo
import { Chip } from "@/ui";
export default function ChipBasicDemo() {
return (
<div className="flex w-full max-w-md flex-wrap items-center justify-center gap-2">
<Chip variant="outline">outline</Chip>
<Chip variant="primary">primary</Chip>
<Chip variant="success">success</Chip>
<Chip variant="warning">warning</Chip>
<Chip variant="danger">danger</Chip>
<Chip variant="info">info</Chip>
</div>
);
}
Link and button variants
Nest a native a or button as the chip's child for interactive chips.
import { Chip } from "@/ui";
export default function ChipVariantsDemo() {
return (
<div className="flex items-center gap-3">
<Chip>
<a href="#" className="text-current no-underline">link chip</a>
</Chip>
<Chip variant="success">
<button type="button" className="cursor-pointer">button chip</button>
</Chip>
</div>
);
}
API Reference
Chip
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "primary" | "success" | "warning" | "danger" | "info" | "primary" | Color semantics of the label |
className | ClassNameValue | - | Custom CSS class, overrides variant colors |
...props | React.ComponentProps<"span"> | - | Supports all native span props |