Badge
Small status indicators and labels. Supports colour variants and size modifiers.
Usage
Default
<span class="zui-badge">Default</span>import { Badge } from '@mrmartineau/zui/react'
<Badge>Default</Badge>---
import { Badge } from '@mrmartineau/zui/astro'
---
<Badge>Default</Badge>import { Badge } from '@mrmartineau/zui/solid'
<Badge>Default</Badge><script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>
<Badge>Default</Badge><template>
<Badge>Default</Badge>
</template>
<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>Colours
DefaultRedOrangeAmberYellowLimeGreenEmeraldTealCyanSkyBlueIndigoVioletPurpleFuchsiaPinkRoseGray
<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>import { Badge } from '@mrmartineau/zui/react'
<Badge>Default</Badge>
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="lime">Lime</Badge>
<Badge color="green">Green</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="teal">Teal</Badge>
<Badge color="cyan">Cyan</Badge>
<Badge color="sky">Sky</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="violet">Violet</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="fuchsia">Fuchsia</Badge>
<Badge color="pink">Pink</Badge>
<Badge color="rose">Rose</Badge>
<Badge color="gray">Gray</Badge>---
import { Badge } from '@mrmartineau/zui/astro'
---
<Badge>Default</Badge>
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="lime">Lime</Badge>
<Badge color="green">Green</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="teal">Teal</Badge>
<Badge color="cyan">Cyan</Badge>
<Badge color="sky">Sky</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="violet">Violet</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="fuchsia">Fuchsia</Badge>
<Badge color="pink">Pink</Badge>
<Badge color="rose">Rose</Badge>
<Badge color="gray">Gray</Badge>import { Badge } from '@mrmartineau/zui/solid'
<Badge>Default</Badge>
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="lime">Lime</Badge>
<Badge color="green">Green</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="teal">Teal</Badge>
<Badge color="cyan">Cyan</Badge>
<Badge color="sky">Sky</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="violet">Violet</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="fuchsia">Fuchsia</Badge>
<Badge color="pink">Pink</Badge>
<Badge color="rose">Rose</Badge>
<Badge color="gray">Gray</Badge><script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>
<Badge>Default</Badge>
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="lime">Lime</Badge>
<Badge color="green">Green</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="teal">Teal</Badge>
<Badge color="cyan">Cyan</Badge>
<Badge color="sky">Sky</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="violet">Violet</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="fuchsia">Fuchsia</Badge>
<Badge color="pink">Pink</Badge>
<Badge color="rose">Rose</Badge>
<Badge color="gray">Gray</Badge><template>
<Badge>Default</Badge>
<Badge color="red">Red</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="lime">Lime</Badge>
<Badge color="green">Green</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="teal">Teal</Badge>
<Badge color="cyan">Cyan</Badge>
<Badge color="sky">Sky</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="violet">Violet</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="fuchsia">Fuchsia</Badge>
<Badge color="pink">Pink</Badge>
<Badge color="rose">Rose</Badge>
<Badge color="gray">Gray</Badge>
</template>
<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>Variants
Controls how the colour is applied.
Subtle (default)
DefaultEmeraldAmberRed
<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>import { Badge } from '@mrmartineau/zui/react'
<Badge>Default</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="red">Red</Badge>---
import { Badge } from '@mrmartineau/zui/astro'
---
<Badge>Default</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="red">Red</Badge>import { Badge } from '@mrmartineau/zui/solid'
<Badge>Default</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="red">Red</Badge><script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>
<Badge>Default</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="red">Red</Badge><template>
<Badge>Default</Badge>
<Badge color="emerald">Emerald</Badge>
<Badge color="amber">Amber</Badge>
<Badge color="red">Red</Badge>
</template>
<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>Fill
DefaultEmeraldAmberRed
<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>import { Badge } from '@mrmartineau/zui/react'
<Badge variant="fill">Default</Badge>
<Badge variant="fill" color="emerald">Emerald</Badge>
<Badge variant="fill" color="amber">Amber</Badge>
<Badge variant="fill" color="red">Red</Badge>---
import { Badge } from '@mrmartineau/zui/astro'
---
<Badge variant="fill">Default</Badge>
<Badge variant="fill" color="emerald">Emerald</Badge>
<Badge variant="fill" color="amber">Amber</Badge>
<Badge variant="fill" color="red">Red</Badge>import { Badge } from '@mrmartineau/zui/solid'
<Badge variant="fill">Default</Badge>
<Badge variant="fill" color="emerald">Emerald</Badge>
<Badge variant="fill" color="amber">Amber</Badge>
<Badge variant="fill" color="red">Red</Badge><script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>
<Badge variant="fill">Default</Badge>
<Badge variant="fill" color="emerald">Emerald</Badge>
<Badge variant="fill" color="amber">Amber</Badge>
<Badge variant="fill" color="red">Red</Badge><template>
<Badge variant="fill">Default</Badge>
<Badge variant="fill" color="emerald">Emerald</Badge>
<Badge variant="fill" color="amber">Amber</Badge>
<Badge variant="fill" color="red">Red</Badge>
</template>
<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>Outline
DefaultEmeraldAmberRed
<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>import { Badge } from '@mrmartineau/zui/react'
<Badge variant="outline">Default</Badge>
<Badge variant="outline" color="emerald">Emerald</Badge>
<Badge variant="outline" color="amber">Amber</Badge>
<Badge variant="outline" color="red">Red</Badge>---
import { Badge } from '@mrmartineau/zui/astro'
---
<Badge variant="outline">Default</Badge>
<Badge variant="outline" color="emerald">Emerald</Badge>
<Badge variant="outline" color="amber">Amber</Badge>
<Badge variant="outline" color="red">Red</Badge>import { Badge } from '@mrmartineau/zui/solid'
<Badge variant="outline">Default</Badge>
<Badge variant="outline" color="emerald">Emerald</Badge>
<Badge variant="outline" color="amber">Amber</Badge>
<Badge variant="outline" color="red">Red</Badge><script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>
<Badge variant="outline">Default</Badge>
<Badge variant="outline" color="emerald">Emerald</Badge>
<Badge variant="outline" color="amber">Amber</Badge>
<Badge variant="outline" color="red">Red</Badge><template>
<Badge variant="outline">Default</Badge>
<Badge variant="outline" color="emerald">Emerald</Badge>
<Badge variant="outline" color="amber">Amber</Badge>
<Badge variant="outline" color="red">Red</Badge>
</template>
<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>All Variants × Colours
subtle
redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrosegray
<!-- subtle variant -->fill
redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrosegray
<!-- fill variant -->outline
redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrosegray
<!-- outline variant -->CSS custom properties
| Property | Default | Description |
|---|---|---|
--zui-badge-accent | var(--color-theme) | Accent colour used for the badge |
--zui-badge-radius | var(--radius-full) | Border radius |