---
meta:
title: Badge
description: Badges are used to draw attention and display statuses or counts.
layout: component
---
```html:preview
Badge
```
```jsx:react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => Badge;
```
## Examples
### Variants
Set the `variant` attribute to change the badge's variant.
```html:preview
Primary
Success
Neutral
Warning
Danger
```
```jsx:react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Primary
Success
Neutral
Warning
Danger
>
);
```
### Pill Badges
Use the `pill` attribute to give badges rounded edges.
```html:preview
Primary
Success
Neutral
Warning
Danger
```
```jsx:react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Primary
Success
Neutral
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
```
```jsx:react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const css = `
.badge-pulse sl-badge:not(:last-of-type) {
margin-right: 1rem;
}
`;
const App = () => (
<>
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
```
{% raw %}
```jsx:react
import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Requests
30
Warnings
8
Errors
6
>
);
```
{% endraw %}
### 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
```
{% raw %}
```jsx:react
import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Messages
Comments
4
Replies
12
);
```
{% endraw %}