Chip Component
React chip component for tags and filters. Solid, soft and outline variants, four colors, three sizes, icons and removable state — built with Tailwind CSS.
Import
javascript
1import { Chip } from "@neuctra/ui";Basic Usage
DesignEngineeringMarketing
Colors & Sizes
PrimaryNeutralSuccessDestructiveSmallLarge
Removable
Pass onRemove to render an accessible remove button.
ReactVueSvelte
Props
All available props for the Chip component.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Chip content (required) |
| variant | "solid" | "soft" | "outline" | "soft" | Visual style |
| color | "primary" | "neutral" | "destructive" | "success" | "primary" | Color palette drawn from the theme tokens |
| size | "sm" | "md" | "lg" | "md" | Chip height, font and icon size scale together |
| icon | ReactNode | — | Leading icon, auto-sized to the chip size |
| onRemove | () => void | — | Renders a remove button and fires on click |
| disabled | boolean | false | Dims the chip and disables the remove button |
| iconClassName | string | — | Styles the leading icon wrapper. |
| labelClassName | string | — | Styles the label text. |
| removeButtonClassName | string | — | Styles the remove/dismiss button. |
| removeIconClassName | string | — | Styles the icon inside the remove button. |
Accessibility
- The remove button gets an explicit aria-label ("Remove {label}") and a visible focus ring.
- Icons are aria-hidden; the text label is what screen readers announce.
Frequently Asked Questions
How do I install and import the Chip component?
Install the @neuctra/ui package, then import it with: import { Chip } from "@neuctra/ui";
What variants and sizes does Chip support?
Chip supports variants: solid, soft, outline and sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Chip component accessible?
Chip is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.