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 in the implementation when you omit color. The brand variant renders Hubtel-aligned teal styling (#009E96) 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...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.
Emits: close — fired when the user clicks the close control.