Badge
A badge is used to annotate other information like a label or an object name. Badges are typically used to reflect a count, e.g. number of object, number of events, number of unread, etc.
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| isRead | boolean | No | false | Adds styling to the badge to indicate it has been read |
| children | React.ReactNode | No | '' | content rendered inside the Badge |
| className | string | No | '' | additional classes added to the Badge |
CSS Variables
| .pf-c-badge | --pf-c-badge--BorderRadius | 30em | ||
| .pf-c-badge | --pf-c-badge--FontSize | 0.75rem | ||
| .pf-c-badge | --pf-c-badge--FontWeight | 600 | ||
| .pf-c-badge | --pf-c-badge--PaddingRight | 0.5rem | ||
| .pf-c-badge | --pf-c-badge--PaddingLeft | 0.5rem | ||
| .pf-c-badge | --pf-c-badge--Color | #151515 | ||
| .pf-c-badge | --pf-c-badge--MinWidth | 2rem | ||
| .pf-c-badge | --pf-c-badge--m-read--BackgroundColor | #f0f0f0 | ||
| .pf-c-badge | --pf-c-badge--m-read--Color | #151515 | ||
| .pf-c-badge | --pf-c-badge--m-unread--BackgroundColor | #06c | ||
| .pf-c-badge | --pf-c-badge--m-unread--Color | #fff | ||
| .pf-c-badge.pf-m-read | --pf-c-badge--Color | #151515 | ||
| .pf-c-badge.pf-m-read | --pf-c-badge--BackgroundColor | #f0f0f0 | ||
| .pf-c-badge.pf-m-unread | --pf-c-badge--Color | #fff | ||
| .pf-c-badge.pf-m-unread | --pf-c-badge--BackgroundColor | #06c | ||
