Count
Show a compact count beside a label, or a dot when only the presence of an update matters.
3122099+5
<script setup lang="ts">import { UiCount } from 'grani'</script> <template> <UiCount :count="3" /> <UiCount :count="12" tone="info" /> <UiCount :count="20" variant="solid" tone="brand" /> <UiCount :count="120" variant="solid" tone="danger" /> <UiCount :count="5" size="sm" variant="solid" tone="success" /></template>
Also called counter badge, count badge, notification count.
Usage
<UiCount>…</UiCount> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Behavior | ||
| countnumber= 0 | 0 | The number. 0 is shown; hide it with v-if when zero means nothing. |
| maxnumber= 99 | 99 | The largest count shown as is; above it the count reads {max}+. A whole number from 1. |
| dotboolean= false | false | A dot without a number: there is something new, how much does not matter. 8px, 6px at sm. |
| Look | ||
| tonebrand | neutral | success | warning | danger | info= "neutral" | "neutral" | Meaning: brand for the product's own counts, a verdict, or neutral. |
| variantsoft | solid= "soft" | "soft" | soft pale plate for a quiet total, solid saturated fill for a count that calls; warning is always solid, its pale plate reads muddy. |
| sizesm | md= "md" | "md" | sm 16px for a corner mark or a dense row, md 20px on a button, a tab or a navigation row. |
| Form and access | ||
| ariaLabelstring | The name of a count that stands alone, the number with its unit: "4 unread". In a tab, a row or a button their label names it. | |
Anything else lands on the root element: native attributes, aria-*, data-testid.