Updated 24 August 2024
🍟 Chips & badgesView FigmaView Figma
These smaller UI elements are crucial for helping the user understand and parse dense areas of the product. Badges are non-interactive.
Chip
Chips help users to make selections, filter content or trigger an action. They can have a leading or trailing action.
chip(32 variants)
Figma notes
If you change the colour, stick to the system used here for background and focus states.
Badge
Badges are for display purposes only and are used to flag additional information to the user. They can have a leading or trailing icon.
badge(8 variants)