--- title: Badge description: Use the Badge component to display small labels for status, notifications, or event counts. --- ## Overview ```html

Hello New

``` ## Variants ```html Primary Success Warning Danger Info ``` ### Status variants ```html Neutral Active Attention ``` ### Brand Brand color badges are available by using modifier `env-badge--brand` or `env-badge--brand-{n}`. Valid values for `{n}` are: `05`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `55`, `60`, `65`, `70`, `75`, `80` , `85`, `90`, `95`, `100`.

Brand Brand 05 Brand 10 Brand 15 Brand 20 Brand 25 Brand 30 Brand 35 Brand 40 Brand 45 Brand 50 Brand 55 Brand 60 Brand 65 Brand 70 Brand 75 Brand 80 Brand 85 Brand 90 Brand 95 Brand 100

### Status badge Indicates active/inactive status. May be used on text elements and also in combination with [profile image](/components/profile-image/#status-badge). ```html

Last logged in 5 h

Logged in

```