Badge

Labels something with a short status, or shows a count next to it.

<script setup lang="ts">
import { FsBadge } from '@fivespark/ui'
</script>

<template>
  <FsBadge tone="success" icon="circle-check" label="Betaald" />
</template>

Usage

<script setup lang="ts">
import { FsBadge } from '@fivespark/ui'
</script>

<template>
  <FsBadge tone="success" label="Betaald" />
</template>

A badge is plain text and never interactive. For something people can press, use Button or Toggle.

Examples

Tones

tone is neutral by default, or success, warning, danger or info.

<script setup lang="ts">
import { FsBadge } from '@fivespark/ui'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <FsBadge label="Concept" />
    <FsBadge tone="success" label="Betaald" />
    <FsBadge tone="warning" label="Verloopt bijna" />
    <FsBadge tone="danger" label="Achterstallig" />
    <FsBadge tone="info" label="Nieuw" />
  </div>
</template>

With an icon

Colour alone does not say the status. Pair the tone with its icon.

<script setup lang="ts">
import { FsBadge } from '@fivespark/ui'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <FsBadge tone="success" icon="circle-check" label="Betaald" />
    <FsBadge tone="warning" icon="triangle-alert" label="Verloopt bijna" />
    <FsBadge tone="danger" icon="circle-x" label="Achterstallig" />
    <FsBadge tone="info" icon="info" label="Nieuw" />
  </div>
</template>

Count

Use count instead of a label. Above max (99 by default) it shows as 99+. Give count-text the phrase screen readers hear.

<script setup lang="ts">
import { FsBadge } from '@fivespark/ui'
</script>

<template>
  <span class="type-body flex items-center gap-2">
    Berichten
    <FsBadge tone="danger" :count="120" :count-text="n => `${n} ongelezen`" />
  </span>
</template>

API Reference

FsBadge

Prop	Type	Default	Description
tone	"danger" | "warning" | "success" | "info" | "neutral"	"neutral"	`neutral` for a state with no signal colour; the four statuses otherwise. The word carries the meaning, the colour repeats it.
label	string		The text: one or two words, a state rather than a verb. Or the default slot, which may hold a `time` or `data` element.
count	number		A non-negative integer, instead of a label. Beside the text that says what is counted.
max	number	99	Above it, the count shows as `{max}+`.
countText	((n: number) => string)		What the count counts, read instead of the number: `(n) => \`${n} ongelezen\``. Without it, the exact number.
icon	"info" | "plus" | "pencil" | "trash" | "copy" | "x" | "download" | "upload" | "search" | "funnel" | "check" | "minus" | "external-link" | "eye" | "eye-off" | "settings" | "log-out" | "ellipsis" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "arrow-up-down" | "layout-dashboard" | "menu" | "circle-check" | "circle-x" | "triangle-alert" | "circle-question-mark" | "loader-circle" | "calculator" | "file-text" | "user" | "building" | "package" | "truck" | "euro" | "percent" | "clock" | "calendar" | "database" | "chart-column"		A leading icon that repeats the status, such as `circle-check`, `triangle-alert`, `circle-x` or `info`. Decorative.

Slot	Props	Description
default	any	The text, in place of `label`: for a `time` or `data` element.