Badge
Description
Badges are used to visually represent document states, statuses, or similar information. They typically consist of all-capitalized text, a background color, a rounded side on the right, and an accompanying icon to convey meaning at a glance.
Badges are a semantic solely visual item. A similar, but intractable element is our tag.
Usage
Visual Representation: Badges serve as visual indicators to highlight specific information or document states, enhancing user comprehension and navigation.
Consistency in Styling: Ensure that badges adhere to consistent styling guidelines, including all-caps text, background color, and rounded side on the right, for uniformity across the interface.
Icon Usage: Choose appropriate icons to accompany badge text, providing additional context and visual cues to users.
Color Usage: According to the semantic character of the badge, use our semantic colors, as stated in our brand colors.
Accessible Contrast: Ensure sufficient contrast between badge text and background color to maintain readability and accessibility for all users, by adhering to our accessibility standards
Example
Badge