Badge

The Badge component lets you add colorful, attention-grabbing labels to your user interface.

The Badge component is designed to display a single item or piece of information. If you need to display multiple items as badges, consider using the Chip Container component instead.

Setting Up Your Badge

1: Add a Label

The label is the text displayed inside the badge. It should be concise and communicate the badge's meaning.

What to Enter: This could be a short word or phrase (e.g., "New," "Sale," "Urgent"), a number (e.g., "5," "10+"), or a brief description.
Best Practices:
- Keep labels short and to the point.
- Use clear and easily understandable language.
- Ensure the label accurately reflects the badge's purpose

2: Choose a Style (Variant)

Select a visual style that aligns with the badge's meaning and your overall design. The "Variant" setting controls the badge's appearance, including its color, background, and other visual elements.

How to Choose: Consider the type of information you're conveying:
- Success: Use a variant with a positive connotation (e.g., green color) for achievements or positive indicators.
- Warning: Use a variant that grabs attention (e.g., yellow or orange) for cautions or potential issues.
- Error: Use a variant that indicates a problem (e.g., red) for errors or critical issues.
- Information: Use a neutral variant (e.g., blue or gray) for general information or updates.
Available Variants: Explore the different variant options in the component's properties panel to find the best fit

3: Include an Avatar (Optional)

Add an avatar inside the badge to provide a visual association or additional context.

When to Use: This is helpful when the badge relates to a specific user, object, or category.
Example: A badge showing the number of unread messages could include the sender's profile picture.
Configuration: If you add an avatar, you'll need to configure its source (image URL or initials) and potentially its size and shape. You will need to select an icon if you don't want to use an image or initials.

Why Use the Badge Component?

Highlight Key Information: Draw attention to important details or updates.
Categorize Items: Visually group and classify items based on their attributes.
Display Status: Indicate the status of an item or process (e.g., "Approved," "Pending," "Complete").
Enhance Visual Appeal: Add visual interest and clarity to your user interface.

Example Use Cases

New Item Indicators: Highlight new products, features, or content.
Notification Counts: Display the number of unread notifications or messages.
Product Labels: Categorize products with labels like "Sale," "Bestseller," or "New Arrival."
User Status: Indicate a user's online/offline status or role.

By effectively using the Badge component, you can create informative and visually engaging user interfaces that guide users' attention and enhance their understanding of the information presented.

Last updated 2 months ago

Was this helpful?

Setting Up Your Badge

1: Add a Label

The label is the text displayed inside the badge. It should be concise and communicate the badge's meaning.

What to Enter: This could be a short word or phrase (e.g., "New," "Sale," "Urgent"), a number (e.g., "5," "10+"), or a brief description.

Best Practices:

Keep labels short and to the point.
Use clear and easily understandable language.
Ensure the label accurately reflects the badge's purpose

2: Choose a Style (Variant)

Select a visual style that aligns with the badge's meaning and your overall design. The "Variant" setting controls the badge's appearance, including its color, background, and other visual elements.

How to Choose: Consider the type of information you're conveying:

Success: Use a variant with a positive connotation (e.g., green color) for achievements or positive indicators.
Warning: Use a variant that grabs attention (e.g., yellow or orange) for cautions or potential issues.
Error: Use a variant that indicates a problem (e.g., red) for errors or critical issues.
Information: Use a neutral variant (e.g., blue or gray) for general information or updates.

Available Variants: Explore the different variant options in the component's properties panel to find the best fit

3: Include an Avatar (Optional)

Add an avatar inside the badge to provide a visual association or additional context.

When to Use: This is helpful when the badge relates to a specific user, object, or category.

Example: A badge showing the number of unread messages could include the sender's profile picture.

Configuration: If you add an avatar, you'll need to configure its source (image URL or initials) and potentially its size and shape. You will need to select an icon if you don't want to use an image or initials.

Why Use the Badge Component?

Highlight Key Information: Draw attention to important details or updates.

Categorize Items: Visually group and classify items based on their attributes.

Display Status: Indicate the status of an item or process (e.g., "Approved," "Pending," "Complete").

Enhance Visual Appeal: Add visual interest and clarity to your user interface.

Example Use Cases

New Item Indicators: Highlight new products, features, or content.

Notification Counts: Display the number of unread notifications or messages.

Product Labels: Categorize products with labels like "Sale," "Bestseller," or "New Arrival."

User Status: Indicate a user's online/offline status or role.

By effectively using the Badge component, you can create informative and visually engaging user interfaces that guide users' attention and enhance their understanding of the information presented.