ZUI — Badge

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 -->

Size

Use the size prop to make a badge smaller or bigger: sm, md (default) or lg.

SmallMediumLarge

<span class="zui-badge zui-badge-size-sm">Small</span>
<span class="zui-badge">Medium</span>
<span class="zui-badge zui-badge-size-lg">Large</span>

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

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

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

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

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

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

<script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>

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

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

<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>

Shape

Use the shape prop to change the corners: default (pill), hard (square), soft (pill) or squircle. The default badge is already a pill, so soft looks the same. A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners.

DefaultHardSoftSquircle

<span class="zui-badge">Default</span>
<span class="zui-badge zui-badge-shape-hard">Hard</span>
<span class="zui-badge zui-badge-shape-soft">Soft</span>
<span class="zui-badge zui-badge-shape-squircle">Squircle</span>

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

<Badge>Default</Badge>
<Badge shape="hard">Hard</Badge>
<Badge shape="soft">Soft</Badge>
<Badge shape="squircle">Squircle</Badge>

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

<Badge>Default</Badge>
<Badge shape="hard">Hard</Badge>
<Badge shape="soft">Soft</Badge>
<Badge shape="squircle">Squircle</Badge>

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

<Badge>Default</Badge>
<Badge shape="hard">Hard</Badge>
<Badge shape="soft">Soft</Badge>
<Badge shape="squircle">Squircle</Badge>

<script lang="ts">
import { Badge } from '@mrmartineau/zui/svelte'
</script>

<Badge>Default</Badge>
<Badge shape="hard">Hard</Badge>
<Badge shape="soft">Soft</Badge>
<Badge shape="squircle">Squircle</Badge>

<template>
<Badge>Default</Badge>
<Badge shape="hard">Hard</Badge>
<Badge shape="soft">Soft</Badge>
<Badge shape="squircle">Squircle</Badge>
</template>

<script setup>
import { Badge } from '@mrmartineau/zui/vue'
</script>

To make squircle the default everywhere, add zui-squircle-all to <html> — see Squircle.

CSS custom properties

Set these on :root, on a wrapper, or on the element. See Component custom properties.

Property	Default	Description
`--zui-badge-accent`	`var(--color-theme)`	Accent colour. The `color` prop sets its own.
`--zui-badge-radius`	`var(--radius-full)`	Border radius
`--zui-badge-font-size`	`var(--step--2)`	Font size. Sizes `sm` and `lg` set their own.
`--zui-badge-padding-block`	`var(--space-4xs)`	Top and bottom padding
`--zui-badge-padding-inline`	`var(--space-2xs)`	Left and right padding