2020-07-15 21:30:37 +00:00
# Badge
[component-header:sl-badge]
Badges are used to draw attention and display statuses or counts.
```html preview
2020-08-10 11:50:16 +00:00
< sl-badge > Badge< / sl-badge >
2020-07-15 21:30:37 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
2022-03-02 15:10:41 +00:00
const App = () => < SlBadge > Badge< / SlBadge > ;
2021-11-04 22:12:47 +00:00
```
2020-07-15 21:30:37 +00:00
## Examples
2021-12-13 22:38:40 +00:00
### Variants
2020-07-15 21:30:37 +00:00
2021-12-13 22:38:40 +00:00
Set the `variant` attribute to change the badge's variant.
2020-07-15 21:30:37 +00:00
```html preview
2021-12-13 22:38:40 +00:00
< sl-badge variant = "primary" > Primary< / sl-badge >
< sl-badge variant = "success" > Success< / sl-badge >
< sl-badge variant = "neutral" > Neutral< / sl-badge >
< sl-badge variant = "warning" > Warning< / sl-badge >
< sl-badge variant = "danger" > Danger< / sl-badge >
2020-07-15 21:30:37 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< >
2021-12-13 22:38:40 +00:00
< SlBadge variant = "primary" > Primary< / SlBadge >
< SlBadge variant = "success" > Success< / SlBadge >
< SlBadge variant = "neutral" > Neutral< / SlBadge >
< SlBadge variant = "warning" > Warning< / SlBadge >
2022-03-02 15:10:41 +00:00
< SlBadge variant = "danger" > Danger< / SlBadge >
2021-11-04 22:12:47 +00:00
< />
);
```
2020-07-16 19:31:46 +00:00
### Pill Badges
2020-07-27 11:32:17 +00:00
Use the `pill` attribute to give badges rounded edges.
2020-07-16 19:31:46 +00:00
```html preview
2021-12-13 22:38:40 +00:00
< sl-badge variant = "primary" pill > Primary< / sl-badge >
< sl-badge variant = "success" pill > Success< / sl-badge >
< sl-badge variant = "neutral" pill > Neutral< / sl-badge >
< sl-badge variant = "warning" pill > Warning< / sl-badge >
< sl-badge variant = "danger" pill > Danger< / sl-badge >
2020-07-16 19:31:46 +00:00
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< >
2022-03-02 15:10:41 +00:00
< SlBadge variant = "primary" pill >
Primary
< / SlBadge >
< SlBadge variant = "success" pill >
Success
< / SlBadge >
< SlBadge variant = "neutral" pill >
Neutral
< / SlBadge >
< SlBadge variant = "warning" pill >
Warning
< / SlBadge >
< SlBadge variant = "danger" pill >
Danger
< / SlBadge >
2021-11-04 22:12:47 +00:00
< />
);
```
2020-07-27 11:32:17 +00:00
### Pulsating Badges
Use the `pulse` attribute to draw attention to the badge with a subtle animation.
```html preview
< div class = "badge-pulse" >
2021-12-13 22:38:40 +00:00
< sl-badge variant = "primary" pill pulse > 1< / sl-badge >
< sl-badge variant = "success" pill pulse > 1< / sl-badge >
< sl-badge variant = "neutral" pill pulse > 1< / sl-badge >
< sl-badge variant = "warning" pill pulse > 1< / sl-badge >
< sl-badge variant = "danger" pill pulse > 1< / sl-badge >
2020-07-27 11:32:17 +00:00
< / div >
< style >
.badge-pulse sl-badge:not(:last-of-type) {
margin-right: 1rem;
}
< / style >
```
2021-11-04 22:12:47 +00:00
```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 = () => (
< >
2021-11-05 14:06:06 +00:00
< div className = "badge-pulse" >
2022-03-02 15:10:41 +00:00
< SlBadge variant = "primary" pill pulse >
1
< / SlBadge >
< SlBadge variant = "success" pill pulse >
1
< / SlBadge >
< SlBadge variant = "neutral" pill pulse >
1
< / SlBadge >
< SlBadge variant = "warning" pill pulse >
1
< / SlBadge >
< SlBadge variant = "danger" pill pulse >
1
< / SlBadge >
2021-11-04 22:12:47 +00:00
< / div >
< style > { c s s } < / style >
< />
);
```
2020-07-15 21:30:37 +00:00
### 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
< sl-button >
Requests
2020-07-16 19:31:46 +00:00
< sl-badge pill > 30< / sl-badge >
2020-07-15 21:30:37 +00:00
< / sl-button >
< sl-button style = "margin-left: 1rem;" >
Warnings
2021-12-13 22:38:40 +00:00
< sl-badge variant = "warning" pill > 8< / sl-badge >
2020-07-15 21:30:37 +00:00
< / sl-button >
< sl-button style = "margin-left: 1rem;" >
Errors
2021-12-13 22:38:40 +00:00
< sl-badge variant = "danger" pill > 6< / sl-badge >
2020-07-15 21:30:37 +00:00
< / sl-button >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
const App = () => (
< >
< SlButton >
Requests
< SlBadge pill > 30< / SlBadge >
< / SlButton >
< SlButton style = {{ marginLeft: ' 1rem ' } } >
Warnings
2022-03-02 15:10:41 +00:00
< SlBadge variant = "warning" pill >
8
< / SlBadge >
2021-11-04 22:12:47 +00:00
< / SlButton >
< SlButton style = {{ marginLeft: ' 1rem ' } } >
Errors
2022-03-02 15:10:41 +00:00
< SlBadge variant = "danger" pill >
6
< / SlBadge >
2021-11-04 22:12:47 +00:00
< / SlButton >
< />
);
```
2020-07-15 21:30:37 +00:00
### With Menu Items
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
```html preview
2022-03-02 15:10:41 +00:00
< sl-menu
style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
>
2020-07-15 21:30:37 +00:00
< sl-menu-label > Messages< / sl-menu-label >
2021-12-13 22:38:40 +00:00
< sl-menu-item > Comments < sl-badge slot = "suffix" variant = "neutral" pill > 4< / sl-badge > < / sl-menu-item >
< sl-menu-item > Replies < sl-badge slot = "suffix" variant = "neutral" pill > 12< / sl-badge > < / sl-menu-item >
2020-07-15 21:30:37 +00:00
< / sl-menu >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
const App = () => (
2022-03-02 15:10:41 +00:00
< SlMenu
2021-11-04 22:12:47 +00:00
style={{
maxWidth: '240px',
2021-11-18 22:41:03 +00:00
border: 'solid 1px var(--sl-panel-border-color)',
2021-11-04 22:12:47 +00:00
borderRadius: 'var(--sl-border-radius-medium)'
}}
>
< SlMenuLabel > Messages< / SlMenuLabel >
2022-03-02 15:10:41 +00:00
< SlMenuItem >
Comments
< SlBadge slot = "suffix" variant = "neutral" pill >
4
< / SlBadge >
< / SlMenuItem >
< SlMenuItem >
Replies
< SlBadge slot = "suffix" variant = "neutral" pill >
12
< / SlBadge >
< / SlMenuItem >
2021-11-04 22:12:47 +00:00
< / SlMenu >
);
```
2020-07-15 21:30:37 +00:00
[component-metadata:sl-badge]