Badge

Use cases

Make sure the Badge is suitable for your use case. There may be other, more appropriate components available.

Use case	Badge	Chip
Showing notifications, counts, or status information	✅	❌
Filtering content and triggering actions	❌	✅

StrataKit MUI modifications

• Added type prop.
• Added an "inline" variant.
• Added size prop.
• The "default" and "primary" colors have been removed. The default color is now "secondary".

Examples

Dot

Use variant="dot" to display the badge without a count inside.

Inline

Set variant="inline" to display the badge in normal document flow instead of positioned relative to its child.

Sizes

The size prop can only be set when using the "inline" variant.

• Small: Use in compact interfaces where space is limited.
• Medium: Default size, suitable for most use cases.

Colors

• Secondary: The default.
• Info: Use to call out an object or action as having an important attribute.
• Success: Use to indicate a successful or completed state when it’s important to provide positive reinforcement.
• Warning: Use for warnings and time-sensitive issues that require attention and potential action.
• Error: Use for critical and irreversible issues that requires attention and potential action. Apply sparingly.

Using icons

In most cases, you should supplement the color with iconography so that color is not the only means of communication. See WCAG’s Use Of Color.

Type

Use the type prop to adjust the visual prominence of an "inline" variant Badge.

• Strong: The default, use when you need the strongest emphasis.
• Muted: Use when you want a balanced level of emphasis.
• Outlined: Use when you need the least emphasis.

✅ Do

• Use Badge for indicating state or status.
• Include a concise and descriptive label.
• Use an icon to communicate a status color in a color-independent fashion.

🚫 Don’t

• Don’t make Badge interactive. It is for indicating status, not controlling it.
• Don’t override colors set using color prop. These have been chosen carefully for their contrast.