When to use a badge
- If you have to convey additional information, such as unread messages or notifications.
- You need to show statuses like online/offline, active/inactive, or new/updated.
- You want to draw attention to critical actions or alerts, such as errors or important updates.
Best practices
Don’t mix sizes
Use the same size badges when used in the same context.
Focus state
By default, badges don’t receive a focus state. To help, you can add a tooltip for more context.
Use sentence case
For best readability, use sentence case for your text.