Chips
Chips are small, rounded tokens for labels, statuses, filters, or dismissible tags. They support a text label, optional leading media (icon or avatar), optional close control, size and colour variants, and default vs outline fills.
Loading Code Block...Basic example
Section titled “Basic example”The default chip is a neutral chip. Add text to render a neutral chip with a label.
Loading Code Block...Leading content
Section titled “Leading content”
Loading Code Block...Close control
Section titled “Close control”With showClose, a close icon appears at the end of the chip. Clicking it hides the chip in the UI.
The component invokes the onClose callback when the user dismisses the chip so you can sync list data or analytics.
The component emits close (listen with @close) when the user dismisses the chip, so you can sync list data or analytics.
Loading Code Block...Sizes sm, md, and lg adjust padding, height, and icon metrics.
Loading Code Block...Colours
Section titled “Colours”Semantic colours map to theme backgrounds and borders. neutral is the default when you omit color. The brand variant renders the Hubtel accent (bg-theme-accent-primary / text-theme-text-on-accent) and is available in both frameworks.
Loading Code Block...Types (default and outline)
Section titled “Types (default and outline)”type="default" uses filled semantic colours. type="outline" keeps a border-forward, lighter surface while preserving the same colour key. Toggle the dropdown below to see every colour rendered in the selected type. If no type is provided, default is used.
Loading Code Block...Custom classes
Section titled “Custom classes”The chip root accepts extra utility classes so you can theme a chip that falls outside the semantic set (e.g. a one-off palette colour, a brand exception, or an experiment). Conflict-aware merging means the class you pass wins — no !important needed.
Pass className — it’s merged onto the root span with tailwind-merge. Any class that collides with the built-in variant (bg-*, text-*, border-*, rounded-*, spacing, sizing, etc.) overrides the built-in value cleanly.
Pass class — it falls through to the root span and is merged by the component’s internal conflict-aware helper. The helper detects collisions across bg-*, text-*, border-*, rounded-*, spacing, sizing, gap-*, flex-*, shadow-*, and opacity-*, and lets the caller-supplied class win. The component uses inheritAttrs: false, so class is applied to the root even when you wrap the chip.
Loading Code Block...Accessibility
Section titled “Accessibility”- Treat chips as static labels unless they are interactive; the close control is a clickable region—ensure
text(or anaria-labelvia spread attributes) conveys purpose when the chip is removable. - Leading images should use empty
altif decorative, or meaningfulaltif they convey information.
Best practices
Section titled “Best practices”Listen for @close to clear the chip from your data when the user dismisses it.
Additional HTML attributes are spread onto the root span.
Non-prop attributes (class, data-*, aria-*, etc.) fall through to the root span thanks to inheritAttrs: false; class is passed through the conflict-aware merge described above so caller styles beat built-in variants.
Emits: close — fired when the user clicks the close control.