Badge

Use the Badge component to render a primitive badge.

Hello
<Badge bg='blue'>
  Hello
</Badge>
Blue
Green
Red
Orange
<Badge bg='blue' mr={2}>Blue</Badge>
<Badge bg='green' mr={2}>Green</Badge>
<Badge bg='red' mr={2}>Red</Badge>
<Badge bg='orange' mr={2}>Orange</Badge>
lightBlue
lightGreen
lightRed
lightOrange
<Badge bg='lightBlue' mr={2}>lightBlue</Badge>
<Badge bg='lightGreen' mr={2}>lightGreen</Badge>
<Badge bg='lightRed' mr={2}>lightRed</Badge>
<Badge bg='lightOrange' mr={2}>lightOrange</Badge>

Props

PropTypeDescription
bgstringBackground color
All space propsnumber or arraySets margin and padding

Note: For the bg prop, blue, lightBlue, green, lightGreen, red, lightRed, orange, and lightOrange are presets that will also set color. Any color may be passed in, although color should be defined as well when not using one of the aforementioned presets.