Notification badge
The badge component is a visual indicator which conveys summary or status information specific to your app.
Usage
Use notification badges to:
- Show end users notifications that call attention to specific events or items
- Provide them with a visual indicator for numeric values
Color usage
The Cegid Design System includes color usage for badge components.
- Primary color: background for actionnable elements
- Semantic color (critical) : background for important elements
- White color: for borders and text when they are included
Types
The Cegid Design System includes two types of notification badges:
- Large notification badges, which display single or multiple digit numbers.
- Small notification badges, which only display a visual indicator.
Each of these can either be "important" (critical) or "actionnable" (primary).
Anatomy and content
- Badges have a circular shape
- Badges include a background color
- Large badges include a numeric value
- A badge can also display a border (optional)
Behaviour and interaction
- A badge is always attached to a parent component
- A badge can have one of the following states: critical, enabled
Responsiveness and density
- The standard size for a large notification badge with a single digit number is 20px
- The standard size for a small notification badge is 8px
- For accessibility reasons, make sure the context is clear when using badges