Badge
Add a short status or tag beside an item, such as “Draft” or “Paid”.
CategoryNewActiveUnder reviewBlockedIn progress
<script setup lang="ts">import { UiBadge } from 'grani'</script> <template> <UiBadge tone="neutral">Category</UiBadge> <UiBadge tone="brand">New</UiBadge> <UiBadge tone="success">Active</UiBadge> <UiBadge tone="warning">Under review</UiBadge> <UiBadge tone="danger">Blocked</UiBadge> <UiBadge tone="info">In progress</UiBadge></template>
Also called chip, tag, pill, status label.
Usage
<UiBadge>…</UiBadge> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| State | ||
| loadingboolean= false | false | Work in progress: a spinner stands where the dot or the icon would. |
| Behavior | ||
| labelstring= "" | "" | Text of the label; the default slot overrides it. |
| dotboolean= false | false | Indicator dot before the text; inline always has one. The text still names it: a dot alone is color. |
| removableboolean= false | false | Close button: an applied filter, an added tag. |
| removeLabelstring= "" | "" | Accessible name of the close button; the default names the label. |
| Look | ||
| tonebrand | neutral | success | warning | danger | info= "neutral" | "neutral" | Meaning: a verdict, brand for the product's own marks, or neutral for a category. |
| variantsoft | inline | outline= "soft" | "soft" | Form: soft pale pill, inline dot with text, outline pale plate with a border. |
| sizesm | md= "md" | "md" | Scale: sm for dense tables and long lists, md beside a title. |
Anything else lands on the root element: native attributes, aria-*, data-testid.