Tags
Design System - Tags component
Tags are compact elements used to represent status, categorise content, or highlight metadata. Tags deliver quick visual cues without disrupting the user experience. They are lightweight, informative, and scalable for various use cases across web and mobile interfaces.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Default
Neutral in appearance, the Default tag is used for generic labelling without implying any state or action.
Success
Represents positive states such as completion, confirmation, or availability. Shown in green.
Error
Indicates issues, failures, or blocked statuses. Visually emphasised with red to alert users.
Warning
Used to caution users about potentially risky or incomplete actions. Typically styled in amber or yellow.
Custom
Allows the use of personalized icons and color schemes for specialized use cases that fall outside standard categories.
Interaction States
Hover State
On hover, tags visually respond with Slight elevation or shadow. This state helps communicate affordance and improves overall interactivity, especially in filter chips or action tags.
Properties
Icon
Tags can include a leading icon to visually reinforce the tag’s context, improving scannability and recognition. Icons change based on tag type.
Stroke
Tags may have a stroked border for emphasis or differentiation. Stroke enhances visual hierarchy without adding bulk, especially useful in outlined or minimal UI themes.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
className
text
iconClassName
text
iconColor
yes/no
no
label
yes/no
no
style
number
stroke
yes/no
type
yes/no
no
showIcon
yes/no
no
labelStyle
yes/no
no
onClick
number
no
alignment
yes/no
no
icon
text
no
Behaviours
Responsiveness
Tags adapt to different screen sizes, containers, and content lengths without breaking layout consistency.
Usage Guide
Use tags to highlight important
Use tags to highlight important labels that help users quickly identify key information at a glance. Tags should be concise yet meaningful, making it easier for users to navigate and understand context.
Avoid using long or complex tags. Tags should be short, clear, and to the point so users can quickly understand their meaning at a glance.
Changelog
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?