Badges

Overview

Badges are pretty component made to emphasis some information, generally a word (e.g: hashtag).

See below different types of badges AstroPine provides.

Default Badge

Pill

#Square

Outlined

Inversed

Copied !

---
import Badge from "$components/badge/Badge.astro";
---

<Badge text="Pill" />
<Badge type="square" text="#Square" />
<Badge text="Outlined" variant="outlined" />
<Badge text="Inversed" variant="inversed" />

Primary Badge

Primary

#Square

Outlined

Inversed

Copied !

---
import PrimaryBadge from "$components/badge/primary/PrimaryBadge.astro";
---

<PrimaryBadge text="Primary" />
<PrimaryBadge type="square" text="#Square" />
<PrimaryBadge text="Outlined" variant="outlined" />
<PrimaryBadge text="Inversed" variant="inversed" />

Secondary Badge

Secondary

#Square

Outlined

Inversed

Copied !

---
import SecondaryBadge from "$components/badge/secondary/SecondaryBadge.astro";
---

<SecondaryBadge text="Secondary" />
<SecondaryBadge type="square" text="#Square" />
<SecondaryBadge text="Outlined" variant="outlined" />
<SecondaryBadge text="Inversed" variant="inversed" />

Success Badge

Success

#Square

Outlined

Inversed

Copied !

---
import SuccessBadge from "$components/badge/success/SuccessBadge.astro";
---

<SuccessBadge text="Success" />
<SuccessBadge type="square" text="#Square" />
<SuccessBadge text="Outlined" variant="outlined" />
<SuccessBadge text="Inversed" variant="inversed" />

Danger Badge

Danger

#Square

Outlined

Inversed

Copied !

---
import DangerBadge from "$components/badge/danger/DangerBadge.astro";
---

<DangerBadge text="Danger" />
<DangerBadge type="square" text="#Square" />
<DangerBadge text="Outlined" variant="outlined" />
<DangerBadge text="Inversed" variant="inversed" />

Info Badge

Info

#Square

Outlined

Inversed

Copied !

---
import InfoBadge from "$components/badge/info/InfoBadge.astro";
---

<InfoBadge text="Info" />
<InfoBadge type="square" text="#Square" />
<InfoBadge text="Outlined" variant="outlined" />
<InfoBadge text="Inversed" variant="inversed" />

Warning Badge

Warning

#Square

Outlined

Inversed

Copied !

---
import WarningBadge from "$components/badge/warning/WarningBadge.astro";
---

<WarningBadge text="Warning" />
<WarningBadge type="square" text="#Square" />
<WarningBadge text="Outlined" variant="outlined" />
<WarningBadge text="Inversed" variant="inversed" />