Inputs & Textarea
Pull to Refresh
React Grid Layout
A badge is a highly visual way to draw attention to content.
Badges categorize information, spotlight a notification, or indicate status.
There are three core types of badges — basic, inline and overlay.
Badge has three types of emphasis — bold, subtle, or outlined, with bold being the default.
Within each emphasis type there are 13 color options — gray, red, orange, yellow, lime, green, teal, turquoise, aqua, blue, ultramarine, purple, and pink.
Badge has five display options to indicate status — none, error, warning, information, success.
Badge has two shapes — square and rounded.
Badge can be displayed in large, medium, small and x-small sizes.
DO: Use a limited color palette to help to reinforce meaning and highlight important status information.
DON'T: Use too many colors in one interface. It negates the effectiveness of a badge and creates visual noise.