Resources
Intro & Anatomy
Badges are visual indicators that convey numeric values, status information, or short text labels as supplementary metadata.
Use badges to display counts, notifications, or status indicators that provide additional context to interface elements without overwhelming the primary content.
Badges must be positioned alongside related elements such as icons or labels to provide context. They serve as representations of properties, states, or quantities that enhance user understanding of interface components.
Options & Styles
Variants
Rounded and square shapes available in 4 colours: primary, neutral, error, and success for different semantic meanings
Sizes
MDX badges come in multiple sizes:
Dot for minimal indication alongside icons
Small, medium, and large for different prominence levels and content requirements
Types
Primary, secondary, and tertiary
Content
Numbers or short text to convey specific information or status updates
Best Practice & Usage
Badges should provide helpful metadata whilst remaining visually connected to related interface elements. Use badges to enhance understanding without creating visual clutter.
Badges help draw attention and provide additional information for connected items. They typically attach to icons, buttons, or labels to indicate quantities such as unread messages or notifications awaiting user attention.
Use badges to convey numeric information, such as available units or item counts.
Don't use badges to display pricing information.
Display badges next to icons or labels to show notification counts or status updates.
Badges must be attached to another element and shouldn't appear independently.
Use badges to highlight updates, e.g. "new" indicators in navigation elements.
Badges are non-interactive elements and shouldn't function as clickable buttons or links.
Theming
You can customise font styles and weight, colours, border width and radius, and sizing to match your design requirements.