Badge

A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates.

Get Tetrisly for Figma

Install Tetrisly for React

Key Features

• Emphasis and Appearance

  Three visual impact levels - High, Medium, and Low - and a comprehensive color palette, users can customize to fit various contexts, effectively conveying meaning while balancing attention and subtlety.

• Intent

  Intent gives a meaningful voice to your messages. Five distinct styles - Negative, Positive, Neutral, Informative, and Warning - provide diverse semantic representation.

• Before and After Icon

  Add before or after icon to enhance visual communication and context.

Variants

Appearance

Badge offers different looks, each adding a unique touch. This variety makes your application look appealing and easier to understand.

Intent

Intent gives a meaningful voice to your messages.

• Neutral,
• Informative,
• Positive message,
• Warning,
• Negative.

Emphasis

Adaptable with three levels of emphasis - High, Medium, and Low - allowing for clear prioritization within your application's communication.

Before and After Icon

Badge supports icon placement to enhance message clarity and aesthetics. Labels are required for accessibility and comprehension.

Label: No

Badges can be icon-only, perfect for small spaces. Include a tooltip on hover to clarify the icon's meaning.

Property	Values	Default value
Appearance	Grey, Blue, Green, Red, Orange, Raspberry, Magenta, Purple, Grape, Violet, Cyan, Teal, Aquamarine, Emerald, Outline	Grey
Intent	Negative, Neutral, Informative, Positive, Warning	Negative
Emphasis	High, Medium, Low	High
Label	Yes / No	Yes
Before Icon	Yes / No	No
After Icon	Yes / No	No

Anatomy

1. 1. Before Icon
   2. Label
   3. After Icon
   4. Container

Best Practices

Don’t overuse the Badges

Excessive badge use can lead to visual clutter and confusion. Apply badges sparingly to emphasize key information and maintain a clean, user-friendly interface. Use badges to highlight critical elements or statuses.

Do

Don't

Select appropriate colors

Choose colors that align with the intended meaning or emotion, such as green for success or red for alerts.

Do

Don't

Adapt to context with Before Icon

Tailor badge styles and placement according to the specific use case or interface for optimal effectiveness. Use Before Icon to highlight meaning or uniqueness.

Do