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 inline prop.
• The "default" color has been removed. The default color is now "secondary".

Examples

Inline

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

Colors

• Secondary: The default.
• Primary: Use accent when high emphasis is required.
• 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.

Icons

All colors except secondary and primary convey a specific type of status. Supplement those colors with an icon so that color is not the only means of communication. See WCAG’s Use Of Color.

For example, include the status-warning icon when applying the ‘error’ color.

✅ 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.