Examples
Disabled
Disabled badges — the count exists but is not actionable (e.g. a filter that would return zero results).
Screen reader text
Pass screenReaderText to append a visually-hidden span that announces the meaning of the
count to assistive tech. The visible text is just 3; AT users hear
3 unread notifications.
Documentation
Badge props
Parameters accepted by
{#include components/data-display/badge ... /}. Model mode: pass
badge=<Badge> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — | DOM id on the <span> wrapper. |
* value
|
String / Number | — |
Visible content. Anything that renders as text — numbers, abbreviations (999+), short labels.
|
variant
|
read | unread | disabled
|
unread
|
State modifier — emits pf-m-{variant}.
|
screenReaderText
|
String | — |
Visually-hidden text appended after the value — announced by AT to give context (e.g.
"unread notifications").
|
Divergence from PF React. We skip className (React-specific). PF React
has separate isRead / isDisabled boolean props; we
collapse them into one variant enum since they're mutually exclusive.
Usage
Pick a state. Use unread for new items that demand attention,
read for known totals (results in table, members in a group),
disabled when the count is informational but the underlying action is unavailable.
Abbreviate large numbers. PF caps badge content at 999+ by convention
— anything four digits or longer truncates visually. Pre-format on the server.
Always annotate counts. A bare 5 is meaningless out of context. Either
include the badge inside a labelled link (<a>Notifications <Badge/></a>) or pass screenReaderText.
Not a notification badge. For the count indicator pinned to a bell icon (with its own animation / attention modifier), see the Notification badge component.