Badge
Badge is a visual extension in the notification domain to direct the user to a new message.
2. Configurations
2.1 Size
There are 2 types of badge: on-top and beside. Both size and usage are built into the type.
- on-top has a smaller size and is expected to be placed on the top right corner of a component.
- beside has a larger size and is expected to be placed on the right side of a component.
2.2 Color
Badges have 2 colors: notification and urgent.
- Use notification as default.
- Use urgent when there is an action needed immediately.
2.3 Placement
Customize the padding to get the desired placement.
3. States
Badges have no interactivity. The states only apply to data handling. When there is data, display the data; Where there is no data, hide the badge.
4. Keyboard experience
Keyboard does not focus on badge.
5. Screen reader experience
Screen reader does not read badge.
6. Resilience and responsiveness
Badge only has content-fit. If the container becomes narrower than the badge’s width, it overflows.
7. Visual specs
7.1 Padding
The top and bottom margins have different values to maintain the visual balance.
7.2 Font size
