Badge

A button component with support for different colors, sizes and states out of the box. You can also customize it to your needs!

Usage

'Read the “', Usage, '” section'

Preview

Badge

Code

BadgeExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Badge" icon="sparkles-16-solid" />

Colors

'Read the “', Colors, '” section'

The badge component has support for the following colors:

Preview

Primary Success Warning Danger Info Monochrome

Code

BadgeColorExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Primary" color="primary" />
<Badge label="Success" color="success" />
<Badge label="Warning" color="warning" />
<Badge label="Danger" color="danger" />
<Badge label="Info" color="info" />
<Badge label="Monochrome" color="mono" />

Variants

'Read the “', Variants, '” section'

Preview

Default Outlined Flat

Code

BadgeSizeExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Default" variant="default" />
<Badge label="Outlined" variant="outlined" />
<Badge label="Flat" variant="flat" />

Rounding

'Read the “', Rounding, '” section'

You can change the badge’s border-radius by setting the rounding prop:

Preview

Full Semi

Code

BadgeSizeExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Full" rounding="full" />
<Badge label="Semi" rounding="semi" />

Sizes

'Read the “', Sizes, '” section'

Preview

Small Medium Large

Code

BadgeSizeExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Small" size="sm" />
<Badge label="Medium" size="md" />
<Badge label="Large" size="lg" />

Icons

'Read the “', Icons, '” section'

You can use the built-in icons from HeroIcons ⤴ in the badge by passing the icon prop:

Preview

Badge with Icon

Code

IconExample.astro

---
import { Badge } from 'studiocms:ui/components';
---

<Badge label="Badge with Icon" icon="sparkles-16-solid" />