Badge
A small but powerful UI element for labels and status indicators
Badges are used to highlight key information such as statuses, categories, or counts. They provide a quick visual cue to help users identify important details at a glance.
Introduction
Badges serve as small but effective labels that help users recognize statuses and classifications instantly. They are commonly used in navigation menus, notifications, or beside text elements to provide additional context.
Visual representation
The following elements visually represent the badge component in different styles, helping to highlight notifications, status indicators, and contextual labels such as errors, successes, and warnings.
Code structure
The ` .aegov-badge ` class represents the badge component with the ` .badge-info ` class indicating it's type.
<span class="aegov-badge badge-info">Badge Info</span>
| Class | Properties |
|---|---|
.badge-info |
Applies the techblue color combination.
|
.badge-error |
Applies the aered color combination.
|
.badge-success |
Applies the aegreen color combination.
|
.badge-warning |
Applies the camel color combination.
|
Variations
Badges come in two sizes to fit different UI needs:
Badge sizes
Badge sizes play an important role in ensuring readability and usability across different interfaces. The size of a badge should be chosen based on its context and the level of emphasis required.
Badge solid
This variation enhances the contrast and visibility of the badge, making it stand out more effectively against different backgrounds. Solid badges are ideal for drawing attention to critical statuses, labels, or counts, ensuring users can quickly recognize important information.
The ` .badge-solid ` class alternates the colors of the component. This provides a stronger version of the badge. You may choose to use this depending on the background colour of where the badge is placed.
<span class="aegov-badge badge-solid badge-info">Badge Info</span>
The default version of the component will always generate the soft variation, however to explicitly override and specify the variation, you can add ` .badge-soft ` as well. This can be very useful when you want to dynamically change the variation of the component.
Please refer to the colour system guideline for more information regarding the UAE Design System colour variations.
Badge with icon
Badges with icons combine text and visual elements to enhance recognition and accessibility. By including an icon alongside the label, these badges make it easier for users to quickly identify the context of the information being highlighted. This variation is useful for statuses, notifications, or action-driven indicators, ensuring that both textual and symbolic cues are available.
The ` .badge-icon ` class enhances the badge by integrating an icon alongside the text. This variation improves visual recognition and accessibility, making it easier to identify statuses, categories, or key information at a glance. Icons serve as an additional cue to reinforce the meaning of the badge, ensuring a more intuitive user experience.
<span class="aegov-badge">
<svg class="badge-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"></path></svg>
Default
</span>
Behaviour
Badges act as small yet impactful visual indicators that seamlessly integrate into the interface. They instantly draw attention to key information such as statuses, categories, or counts, allowing users to grasp important details at a glance. Whether used in navigation, tables, or labels, badges enhance clarity by providing quick, context-aware insights without overwhelming the UI.
Accessibility
Badges should be accessible to all users, including those using assistive technologies. To ensure accessibility:
- Use appropriate color contrast ratios to enhance readability.
- Provide meaningful text within the badge instead of relying on color alone to convey information.
- Add
aria-labeloraria-labelledbyattributes when necessary to describe the badge's purpose for screen readers.
Icons within badges should have aria-hidden="true" to avoid redundancy if the same meaning is conveyed through text. If an icon alone represents information, provide an accessible label for clarity.
By adhering to accessibility best practices, you can create an inclusive and user-friendly component that caters to all users, including those with disabilities.
Usage
Badges can be used in various scenarios, including:
Where to use badge?
Here are common use cases where an badge would be appropriate.
- Status Indicators – Displaying the status of a process, such as "Active," "Pending," or "Completed."
- Categorization – Labeling different content types, such as "Technology," "Health," or "Finance."
- Notifications & Counts – Indicating the number of unread messages, alerts, or new updates.
- Tagging – Highlighting labels like "New," "Featured," or "Trending."
Spacing
Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards an badge.
- Always maintin a vertical padding of
.125remon the badge container. - Always maintin a horizontal padding of
.5remon the badge container. - If you are using the variation of an badge with an icon, the spacing between the icon and the content must be
.5remand there should be no content below the icon.
