Badge

Documentation and examples for badges, our small count and labeling component.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

Basic

Primary Secondary Success Danger Warning Info Light Dark

Astro file

---
import { Badge } from 'astro-bootstrap';
---

<Badge>Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="light">Light</Badge>
<Badge variant="dark">Dark</Badge>

Pill

Primary Secondary Success Danger Warning Info Light Dark

Astro file

---
import { Badge } from 'astro-bootstrap';
---

<Badge pill>Primary</Badge>
<Badge pill variant="secondary">Secondary</Badge>
<Badge pill variant="success">Success</Badge>
<Badge pill variant="danger">Danger</Badge>
<Badge pill variant="warning">Warning</Badge>
<Badge pill variant="info">Info</Badge>
<Badge pill variant="light">Light</Badge>
<Badge pill variant="dark">Dark</Badge>

Background and Color variant

Badge

Astro file

---
import { Badge } from 'astro-bootstrap';
---

<Badge variant={false} bgVariant="light" colorVariant="primary">Badge</Badge>