Badge status
A badge is a small visual indicator that communicates the status of an item. Badges enhance usability by providing quick, easily digestible information.
They offer supplementary context, helping users understand an item's status at a glance.
"Status" refers to the condition or stage of something at a particular time, such as a support ticket being "open," "in progress," "resolved," or "closed."
Badges don’t have any interaction, they are visual communicators.
Status types
Neutral (Grey)
Examples: Archieved, Deleted, Paused, Draft, Not started, Ended, Upcoming
Information (Blue)
Examples: Active, In use, Published, Requirements, Ready
Positive (Green)
Examples: Approved, Completed, Success, New, Purchased, Licensed, Open, Downloaded, Uploaded
Notice (Yellow)
Examples: Caution, Attention, Needs approval, Pending, Scheduled, Syncing, processing
Negative (Orange)
Examples: Warning, Error, Alert. Rejected, Failed, Closed, Full
Unknown (Purple)
Examples: Unique customs statuses
Note: When the status has fulfillment tone, always describe the tone in the past tense. Eg. Completed, Filled, Closed, etc.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Status and alerts
Demo
Code
Responsive preview
The use cases
High emphasis statuses
High-emphasis statuses are the ones that affect the whole container.
The badge is placed at the top of a container component, aligned to the left.
The badge should have a margin of 10px (left margin following container padding).
Developers note: Place in the CSS for readers' accessibility, the Badge status is read after the heading.
Examples:
Tabs
The badge is placed at the top left of the component, before the title or content.
Accordion
The badge is placed at the top left of the component, before the title or content.
Modal
The modal component includes the title as part of the component header. Therefore, the badge should be placed on top of the main content.
Timeline
The badge is placed at the top left of the component, before the title or content.
Low emphasis statuses
Low-emphasis statuses are the ones that affect sections in the container.
The badge is placed after the heading of each section, aligned to the left.
The badge should have a margin of 10px (left margin following container padding). For row (tables) cases the top and bottom can have min 5px.
Examples:
Table
The badge is placed in its own “Status” cell, with no additional information included.
Extra status information (e.g., description, date, comments) is placed in a separate cell next to the status cell.
Badge cell placement:
Align left.
Follow the vertical alignment of the other cells: top or middle.
In table rows, the top and bottom margins should be a minimum of 5px.
Tabs
The badge is low emphasis when more than one section has ONE status. The badge goes under each section Title.
Accordion
The badge is low emphasis when more than one section has ONE status. The badge goes under each section Title.
Accessibility considerations
For screen readers, the badge status needs to be read after the heading (title). Even if the badge is visually placed above the title, the reader needs to read it below the title.
Do
- Use only one status at a time. If your content requires multiple statuses, consider using regular text metadata and reserve a single badge for only the most important status.
- Use a single word to describe the status tone. Only use two words if you need to describe a complex state (e.g., “Partially refunded,” “Partially fulfilled,” “Public day”).
- Use plain text to avoid the overuse of status indicators. Not icons or images.
- The text should be short and descriptive.
- Use sentence-style capitalization—only capitalize the first letter of the first word.
- Consult a UX team member if unsure of which status colour to use.
Don't
- Don’t use badges as feedback. "Feedback" refers to information or opinions provided by users, customers, or organizations about a product, service, or experience.
- Don’t use badges to communicate updated dates. Dates should have their component.
- Don’t use badges for high-attention indicators where immediate user action is needed. Use the status and alerts component instead.
- Don’t place a "Badge status" inside a "Status and alerts" component.
- Don’t include icons in badges; text and colour are sufficient communicators.
- Don’t display more than one badge in the same container/section. Badges are meant to offer quick context about the status associated with an item.
- A badge shouldn't be a standalone, floating element. If it can't be placed in direct relation to the object it supports, consider using another method that provides more context for the metadata.
- Don’t place a badge beside an action component (e.g., button, tag, icon, chip).