Badge

<span class="zui-badge">Default</span>

<span class="zui-badge">Default</span>

import { Badge } from '@mrmartineau/zui/react'

<Badge>Default</Badge>

---
import { Badge } from '@mrmartineau/zui/astro'
---

<Badge>Default</Badge>

<span class="zui-badge">Default</span>
<span class="zui-badge zui-badge-color-red">Red</span>
<span class="zui-badge zui-badge-color-orange">Orange</span>
<span class="zui-badge zui-badge-color-amber">Amber</span>
<span class="zui-badge zui-badge-color-yellow">Yellow</span>
<span class="zui-badge zui-badge-color-lime">Lime</span>
<span class="zui-badge zui-badge-color-green">Green</span>
<span class="zui-badge zui-badge-color-emerald">Emerald</span>
<span class="zui-badge zui-badge-color-teal">Teal</span>
<span class="zui-badge zui-badge-color-cyan">Cyan</span>
<span class="zui-badge zui-badge-color-sky">Sky</span>
<span class="zui-badge zui-badge-color-blue">Blue</span>
<span class="zui-badge zui-badge-color-indigo">Indigo</span>
<span class="zui-badge zui-badge-color-violet">Violet</span>
<span class="zui-badge zui-badge-color-purple">Purple</span>
<span class="zui-badge zui-badge-color-fuchsia">Fuchsia</span>
<span class="zui-badge zui-badge-color-pink">Pink</span>
<span class="zui-badge zui-badge-color-rose">Rose</span>
<span class="zui-badge zui-badge-color-gray">Gray</span>

<span class="zui-badge zui-badge-color-emerald">Emerald</span>
<span class="zui-badge zui-badge-color-red">Red</span>
<span class="zui-badge zui-badge-color-blue">Blue</span>

import { Badge } from '@mrmartineau/zui/react'

<Badge color="emerald">Emerald</Badge>
<Badge color="red">Red</Badge>
<Badge color="blue">Blue</Badge>

---
import { Badge } from '@mrmartineau/zui/astro'
---

<Badge color="emerald">Emerald</Badge>
<Badge color="red">Red</Badge>
<Badge color="blue">Blue</Badge>

<span class="zui-badge">Default</span>
<span class="zui-badge zui-badge-color-emerald">Emerald</span>
<span class="zui-badge zui-badge-color-amber">Amber</span>
<span class="zui-badge zui-badge-color-red">Red</span>

<span class="zui-badge zui-badge-variant-fill">Default</span>
<span class="zui-badge zui-badge-variant-fill zui-badge-color-emerald">Emerald</span>
<span class="zui-badge zui-badge-variant-fill zui-badge-color-amber">Amber</span>
<span class="zui-badge zui-badge-variant-fill zui-badge-color-red">Red</span>

<span class="zui-badge zui-badge-variant-outline">Default</span>
<span class="zui-badge zui-badge-variant-outline zui-badge-color-emerald">Emerald</span>
<span class="zui-badge zui-badge-variant-outline zui-badge-color-amber">Amber</span>
<span class="zui-badge zui-badge-variant-outline zui-badge-color-red">Red</span>

<span class="zui-badge">Subtle (default)</span>
<span class="zui-badge zui-badge-variant-fill zui-badge-color-emerald">Fill</span>
<span class="zui-badge zui-badge-variant-outline zui-badge-color-red">Outline</span>

import { Badge } from '@mrmartineau/zui/react'

<Badge>Subtle (default)</Badge>
<Badge variant="fill" color="emerald">Fill</Badge>
<Badge variant="outline" color="red">Outline</Badge>

---
import { Badge } from '@mrmartineau/zui/astro'
---

<Badge>Subtle (default)</Badge>
<Badge variant="fill" color="emerald">Fill</Badge>
<Badge variant="outline" color="red">Outline</Badge>

<!-- subtle variant -->

<!-- fill variant -->

<!-- outline variant -->