# Badge
[component-header:sl-badge]
Badges are used to draw attention and display statuses or counts.
```html preview
Badge
```
## Examples
### Types
Set the `type` attribute to change the badge's type.
```html preview
Primary
Success
Info
Warning
Danger
```
### Pill Badges
Use the `pill` attribute to give badges rounded edges.
```html preview
Primary
Success
Info
Warning
Danger
```
### Pulsating Badges
Use the `pulse` attribute to draw attention to the badge with a subtle animation.
```html preview
1
1
1
1
1
```
### With Buttons
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
```html preview
Requests
30
Warnings
8
Errors
6
```
### With Menu Items
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
```html preview
Messages
Comments 4
Replies 12
```
[component-metadata:sl-badge]