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
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
