Chips are compact elements that can be a representation of individual interactive items and metadata. They catch users' attention and allow them to interact directly with them or their parent component, make selections, filter content, or trigger actions; these actions, however, should never be the primary action since that's what CTA buttons are for.
Chips will most of the time appear dynamically as a group of multiple interactive elements.
Chips can include a leading label for the metadata displayed in the chip. They can also include a Badge to show a count relating to that metadata and a close icon button to remove the chip.
Chips are compact UI elements designed to represent individual interactive items or metadata. They are versatile components that support multiple use cases such as filtering, tagging, and indicating status. Each variant of the chip—Read-Only, Default, and Dismissible—comprises specific elements and structures tailored to its functionality.
| Element | Default | Read-Only | Description |
|---|---|---|---|
| 1. Value | ✓ | ✓ | The primary textual information that the chip represents. |
| 2. Key (Optional) | ✓ | ✓ | Provides additional context for the value displayed on the chip. |
| 3. Badge Component (Optional) | ✓ | ✓ | Displays a count or related metadata. |
| 4. Icon (Optional) | ✓ | ✓ | An informative icon that enhances the chip's context or appearance. |
| 5. Outline | ✓ | — | Makes the differentiation that the chip is interactive and selectable. |
| 6. dismissible icon | ✓ | — | Indicates dismissibility and dismissible area |
The default chip uses the subcomponent of the dismissible icon (6).
Chips serve as compact visual elements for representing metadata, making selections, or filtering content. They provide a secondary layer of interactivity or information in user interfaces and should never serve as the primary call-to-action or a link to other pages.
Chips may be used inline with headers or within cards to convey supplementary information like category, type, or metadata.
Chips are effective in tables for showing quick data tags, such as statuses or attribute types, within table cells.
They help visually differentiate elements quickly when used for category or labelling.
Chips are not links or CTAs. Their function is always secondary to other UI controls like buttons or tabs.
For alerts or warnings, use standard UI components like notifications or inline error messages, not chips.
Chips should not display brand-specific content like "Ubuntu Pro". Use official branding materials instead.
Chip values should be between 1-3 words, maximum of five. Longer values reduce readability and visual scannability.
Chips must include a text label. Icons alone don't convey enough context.
When content is selected in a combo box, show the selected value as plain text, not a chip.
Let users filter page content dynamically by interacting with the chips. Interactive filter chips must be backed by a secondary filtering menu or panel for accessibility and discoverability.
Chips are not a replacement for exclusive selection controls. Use radios or toggles for binary choice input.
Default chips must include active filtering behavior. If no filtering is applied, use a read-only chip instead.
Use read-only chips to indicate a status like "New" next to the side navigation item.
Read-only chips convey static information like availability, type, or other types of metadata.
Read-only chips must not include hover or click states.
Chips can be further tailored through customizable attributes that extend the primary variants. These attributes—such as color, icon, and size—add flexibility and adaptability to meet various design and functionality requirements.
Value is the mandatory text (string of characters) attribute of the chip, with an advised number of words between 1 and 3, with a maximum of 5. Do not use the value property to only indicate numeric values. Use the badge component instead.
Chips support interactive states to provide clear feedback on user interactions. These states ensure usability and accessibility across different interactions. Currently there is no disabled chip state.
Default chips have default, hover and active states while the read-only chips only have a default state. The dismissible chip's interactive area is limited to the chip's icon area. In any use-case chips should have only one interaction associated with them.
Colors - for background and stroke color - can have semantic connotation, reinforcing meaning or status visually, making it easier for users to interpret contextual information, but can be also used to indicate categorization. If there is a need for additional color(s), a contribution must be made to the design system.
Chips are available in two sizes affecting the height of the chip, to accommodate different UI needs. Width is defined by the value text's length.
The Icon property on the left hand side of the component is an optional attribute. It is used to display additional contextual data related to the chip's content, providing an easy way to distinguish between chips. The icon on the right hand side is reserved for the dismissible chip - having the Close icon as part of its anatomy.
All non-semantic icons from the icon library are supported for chips. Semantic icons should be only used with the corresponding semantic background color.
Keys (also referred to as leads) are optional, leading text elements that provide context to the chip's primary value.
Example: For a filter labeled "Month: June," "Month" is the key, and "June" is the value.
The Badge property is an optional attribute. It is used to display a quantitative value related to the chip's content, providing additional context at a glance.
Example: In Landscape the chip's value could represent a group of machines while the badge would refer to the number of machines in that group.
The dismissible icon is a subcomponent of the Default chip. When present it becomes the interactive area of the chip.
The spacing in the default sized chip has a 0.25rem padding, including the outline stroke of the component on both top and bottom of the chip.
Label wrappers have a 5.5px padding vertically.
In the dense sized chip, the outline stroke is excluded from the body of the chip, so that the padding is only including the 1.5px border.
Read-only chips have the same dimensions as default chips. The transparent borders are calculated into the size of the chip.
In the default chip the spacing between icon, label, badge and dismissible icon is 4px. The chip's horizontal padding is 10.5px.
We recommend a spacing of minimum 8px between chip components and chip components with other components.
The chip width mainly depends on the number of characters included in the chip's value. We would like to advise you to keep the length of the chip between one and three words. The hard requirement is having the chip with a maximum of five words.
In the case of an overflow, the chip's value truncates rather than wrapping it inside the chip.
Responsiveness is inherited from the already documented chip component.
The source of truth can be found in the Figma file for spacing and color tokens.
