Chip
chipShows a compact token with semantic styling, an optional dot, and removal action.
Usage
Variation and Tone
variant (soft / solid / outline) × tone (brand / danger / neutral) combined vision.
<>
<Chip tone="brand">Brand</Chip>
<Chip variant="solid" tone="brand">Brand</Chip>
<Chip variant="outline" tone="brand">Brand</Chip>
<Chip tone="danger">Danger</Chip>
<Chip tone="neutral">Neutral</Chip>
</>Preamble content
Choose one visual indicator: a dot, a startContent icon, or an avatar (priority: avatar > startContent > dot).
<>
<Chip dot tone="brand">Online</Chip>
<Chip tone="brand" startContent={<Sparkles className="size-3.5" />}>New</Chip>
<Chip tone="brand" avatar={<Avatar fallback="Ann" />}>Anna</Chip>
</>Removable
Pass onClose to render the close (×) button. Click to trigger the callback to be removed by the caller.
<Chip tone="brand" onClose={() => remove(item)}>
React
</Chip>Disabled
isDisabled Reduce transparency, shield pointer, and close button cannot be clicked.
<>
<Chip isDisabled>Disabled</Chip>
<Chip isDisabled onClose={() => {}}>Disable to close</Chip>
</>When to use
Use Chip for a category, filter, or selected token that may be removed. Use Badge for corner counts or Dot for a bare status.
Import
import { Chip, chipVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "solid"|"soft"|"outline" | soft | Visual style. |
| tone | "brand"|"danger"|"neutral" | brand | Semantic tone. |
| size | "sm"|"md" | md | Size. |
| dot | boolean | — | Leading status dot. |
| isDisabled | boolean | — | Lowers opacity and disables pointer actions. |
| className | string | — | Root class. |
Events
| Event | Type | Description |
|---|---|---|
| onClose | () => void | Adds and handles the close button. |
Slots
| Slot | Type | Description |
|---|---|---|
| avatar | ReactNode | Leading square avatar. |
| startContent | ReactNode | Leading icon when avatar is absent. |
| endContent | ReactNode | Content before close. |
| children | ReactNode | Chip text. |
Usage notes
Priority is avatar, startContent, then dot. A close button exists only with onClose; disabled chips block it too.
The close control's accessible label follows ConfigProvider: zhCN uses "\u79fb\u9664" and enUS uses “Remove”. Legacy custom locales without components.chip keep the Chinese fallback.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<Chip onClose={() => {}}>Tag</Chip>