Components/Chip

Chip

Compact interactive tags for categories, labels, and filter selections. Supports removable mode, icons, and 6 color variants in 3 visual styles.

import { Chip } from "@animui/ui"

Colors

DefaultBlueGreenAmberRedViolet

Variants

DefaultOutlinedFilled

Removable (interactive)

ReactTypeScriptMotionTailwind

With icon

LabelCategory

Props

PropTypeDefaultDescription
variant"default" | "outlined" | "filled""default"Visual style of the chip.
color"default" | "blue" | "green" | "amber" | "red" | "violet""default"Color scheme.
removablebooleanfalseShow an X button to remove the chip.
onRemove() => void—Called when the X is clicked.
onClick() => void—Makes chip clickable (shows pointer cursor).
iconReactNode—Icon rendered before the label.
activebooleanfalseShow a ring to indicate selected/active state.
disabledbooleanfalseDisable interactions.
© 2026 Steal Shadow. MIT License.Report an issue