Badge
Small inline label used to indicate status, categories, or counts. Supports six colour variants and an optional status dot.
Variants
Default Accent Teal Success Warning Danger
import { Badge } from "@usevyre/react";
<Badge variant="default">Default</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="teal">Teal</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge><script setup>
import { Badge } from "@usevyre/vue";
</script>
<template>
<Badge variant="default">Default</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="teal">Teal</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
</template>With status dot
Add dot to show a pulsing status indicator — useful for live system status displays.
Online Degraded Outage
<Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Degraded</Badge>
<Badge variant="danger" dot>Outage</Badge><Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Degraded</Badge>
<Badge variant="danger" dot>Outage</Badge>Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "accent" | "teal" | "success" | "warning" | "danger" | "default" | Colour style of the badge. |
dot | boolean | false | Shows a small status dot before the label text. |
class / className | string | — | Additional CSS class. |
Valid props
| Prop | Values | Default |
|---|---|---|
variant | "default"|"accent"|"teal"|"success"|"warning"|"danger" | default |
dot | true|false | false |
Common AI mistakes
- variant="primary"→ Use variant="accent" for brand color
- variant="error"→ Use variant="danger"
- variant="info"→ Use variant="teal" for info-like styling
Quick examples
Live status with dot
<Badge variant="success" dot>Online</Badge>Warning badge
<Badge variant="warning">Beta</Badge>