Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Badges

Badges are compact visual indicators used to highlight status, categories, or small pieces of contextual information. In the Sharjah Design System, badges provide a clear and consistent way to draw attention to important labels without overwhelming the interface.

Purpose

  • Indicate status or state (e.g. active, pending, completed)
  • Highlight categories or tags
  • Display counts or short labels
  • Provide quick visual cues within tables, cards, or lists

Badges should be used sparingly and only for short, meaningful information.

Interaction Behavior

  • Badges are usually non-interactive
  • If clickable, ensure they have clear hover and focus states
  • Avoid using badges as primary actions

Accessibility Guidelines

  • Ensure sufficient colour contrast between text and background
  • Do not rely on colour alone to convey meaning
  • Provide text labels that clearly describe the status
  • Ensure readable text size for all users

Responsive Behavior

  • Badges scale naturally with surrounding content
  • Maintain readability across all screen sizes
  • Avoid truncating badge text on smaller devices
Previous Tabs Next Stepper