Use the Badge component to render a primitive badge.
<Badge bg='blue'> Hello </Badge>
<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>
<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>
| Prop | Type | Description |
|---|---|---|
bg | string | Background color. To be deprecated |
| All space props | number or array | Sets margin and padding |
color | string | The color of the badge |
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.
You can choose any palette or theme color for Badge.
<Badge color="primary">primary</Badge>
Uses the color from theme.palette.primary.base.
<Badge color="error">error</Badge>
Uses the color from theme.palette.error.base.
<Badge color="warning">warning</Badge>
Uses the color from theme.palette.warning.base.