Description

Badge is a small graphical element that is typically used to display additional information, status, or notifications related to specific UI elements. Badges are often represented as a small shape (such as a circle or rectangle) with text or icons inside.

When using badges in UI design, it's essential to consider the following best practices:

• Keep badges small and unobtrusive to avoid overwhelming the UI.
• Avoid overusing badges and use them only for relevant and meaningful information or actions.

In BCC Design System components for that purposes are:

• Badge - provide alphabetical information.
• Pin - provide numerical/icon information.

Use of component

1. Notifications: Badges can be used to show the number of unread notifications or messages, drawing the user's attention to the new information.
2. Status indicators: Badges can be used to indicate the status of a task or action, such as showing the progress of an upload or download.
3. Rewards and achievements: Badges can be used to reward the user for completing specific tasks or reaching milestones, such as earning badges for completing a set number of workouts in a fitness app.
4. Categories and labels: Badges can be used to categorize or label content, such as indicating the type of content or topic of a post.
5. Availability or stock levels: Badges can be used to show the availability or stock levels of products or services, such as indicating when an item is low in stock or out of stock.

Types

• What are states?