Badge
Badge is a count or status dot anchored to the top-right of a child, or a standalone pill when there is no child.
Demos
Types
Overlay
default is danger red, the notification color. primary is brand fill with brand-on text. Warning uses brand-on text so the gold fill stays readable. Dot, processing, on a button
dot is an 8×8 circle and ignores value. processing pulses a ring in the type color. Give a dot-only badge an aria-label. Max and show zero
Numbers above
max (default 99) render as 99+. 0 is hidden unless show-zero is set. Strings are not clamped. Standalone
With no child, the badge is an inline pill. Standalone
default is a soft gray chip; overlay default stays danger red. Offset
Nudge from the top-right anchor with
--gk-badge-offset-x and --gk-badge-offset-y, or the offset property ("4, -2" or [4, -2]). API
Badge Props
| Prop | Type | Default |
|---|---|---|
value | number | string | — |
max | number | 99 |
dot | boolean | false |
type | 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'default' |
show-zero | boolean | false |
processing | boolean | false |
offset | [number, number] | — |
max applies only when value is a number. Numeric attributes such as value="120" are treated as numbers. Empty value, or 0 without show-zero, removes the badge node. There is no event in v1; clicks pass through to the child.
Count pills are 18px tall, at least 20px wide, with 6px of horizontal padding (7px when the label is wider than one character) so glyphs stay clear of the pill edge and the white ring.
Badge Slots
| Name | Description |
|---|---|
| default | Child to overlay. Omit it for a standalone pill |
CSS Parts
| Part | Description |
|---|---|
root | Inline wrapper |
wrapper | Positioning context around the child |
badge / sup | The pill or dot |
dot | Present on the same node when dot is set |
value | Label text |
CSS variables
| Variable | Default |
|---|---|
--gk-badge-offset-x | 0px |
--gk-badge-offset-y | 0px |
--gk-badge-z-index | 1 |
Accessibility
- Numeric badges expose a short name such as “3 unread” / 「3 則未讀」 unless the host already has
aria-label. - Dot-only badges need an accessible name on the host (
aria-label). The component falls back to “Status” / 「狀態」. - Standalone text is the accessible name. Badge does not set
role="status". - Icon-only children should keep a hit target of at least 34px.