Examples
Filled labels
All nine colors, the four status auto-icons (info / success / warning / danger), removable + disabled + clickable variants.
Outlined labels
Pass variant="outline" for the outlined treatment. All color and removable / icon
combinations work the same way.
Compact labels
Pass compact=true for the tighter density used in toolbars, filter chips, and table
action columns.
Custom render
PF React's render prop has no direct Qute equivalent. For custom inner content (bold /
mixed children) hand-code the pf-v6-c-label__text span; for clickable navigation, pass
href to render the whole label as an anchor.
render prop. In Qute, you hand-code the inner
pf-v6-c-label__text span when you need bold / links / mixed children; or pass
href to render the whole label as an anchor.
Editable labels
editable=true opts into PF v6's edit-in-place chrome. Wire the Alpine
phaLabelEditable component for the click-to-edit / Enter-to-commit / Esc-to-cancel
interaction.
Basic label group
Wrap labels in label-group to lay them out as a single navigable group. Each label sits
in its own <li class="pf-v6-c-label-group__list-item">.
- Label one
- Label two
- Label three
Label group with overflow
Pass numLabels to collapse extras behind an "N more" toggle. The Alpine
phaLabelGroup component hides items past the threshold and renders the toggle button.
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
- Label 6
Label group with categories
Pass categoryName to prepend a category label and apply
pf-m-category. Common pattern for filter chip stacks (Platform: ..., Language: ...).
- Kubernetes
- OpenShift
- AWS
- Java
- Go
- Python
Label group with removable categories
closable=true on the category group adds its close button; five labels collapse to three
behind the overflow toggle. Useful for "applied filters" toolbars.
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
Vertical label group
vertical=true stacks labels in a column — here a closable category with five labels
collapsing to three, as on patternfly.org.
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
Editable label group
Drop editable labels (each with its own phaLabelEditable Alpine binding) into a
label-group to let users edit chip text in place.
Editable label group with add button
The variant="add" label inside a group becomes a "new tag" input. The Alpine
phaLabelGroupAdd component clones a template <li> for
each entry.
- monitoring
- infrastructure
Overflow label
A button-flavoured pf-m-overflow label — the affordance label groups use to reveal hidden
labels.
Label group with overflow expanded
The overflow group rendered already expanded (startExpanded) — Show less collapses it
live.
- Label one
- Label two
- Label three
- Label four
- Label five
- Label six
Vertical label group with overflow
pf-m-vertical stacking combined with the live overflow toggle (3 shown).
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
- Label 6
Vertical label group with overflow expanded
The vertical overflow group rendered already expanded — Show less collapses it live.
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
- Label 6
Vertical label group with category
Vertical stacking plus a category name via pf-m-category.
- Label 1
- Label 2
- Label 3
Vertical label group with removable category
Vertical category group whose labels are removable and whose group has a close button.
- Label 1
- Label 2
- Label 3
Static labels, dynamic label group
Removable static labels in a dynamic group — the close buttons remove their label live.
- Static label 1
- Static label 2
- Static label 3
Mixed labels, dynamic label group
Static removable labels and inline-editable labels mixed in one group.
- Static label
- Another static label
Label group with compact labels
A group whose labels all carry pf-m-compact.
- Label 1
- Label 2
- Label 3
Label group with compact labels and overflow
Compact labels with the live overflow toggle (3 shown).
- Label 1
- Label 2
- Label 3
- Label 4
- Label 5
- Label 6
Labels with truncation
Cap label text with --pf-v6-c-label__text--MaxWidth; overflow ellipsizes, alone or in a
group.
- Grouped label with a very long name
- Short label
Editable labels with add dropdown
The overflow-style Add label control opens a menu of preset texts; selecting one prepends it to the group.
Editable labels with add modal
The Add label control opens a small modal with a form; submitting prepends the typed label.
Documentation
Label props
Parameters accepted by
{#include components/data-display/label ... }Text{/include}. Model mode: pass
label=<Label> built in Java instead — the Java tab on each example shows the
builder. Label text is the include body (default content slot). See the runtime template's
{! ... !} comment block for the full param list — id,
color, variant, status,
compact, disabled, clickable,
editable, removable,
removeAria, href, iconName.
Status shorthand: setting status applies
pf-m-{status} AND auto-renders the matching icon — info →
fa:circle-info, success → fa:circle-check, warning →
fa:triangle-exclamation, danger → fa:circle-exclamation,
custom → fa:bell. Override the auto-icon with iconName.
Divergence from PF React. We skip closeBtn /
closeBtnProps (hand-code __actions instead),
render (write the inner span by hand or pass href),
textMaxWidth + tooltipPosition (no truncation tooltip
pattern yet), and the JS callbacks (onClick / onClose /
onEditComplete) — wire those at the consumer level via Alpine or HTMX.
LabelGroup props
Parameters accepted by
{#include components/data-display/label-group ... /}. Model mode: pass
group=<LabelGroup> built in Java instead — the Java tab on each example shows the
builder.
Params: id, categoryName (renders the
category label and applies pf-m-category), vertical (stack
labels), numLabels (default 3 — overflow threshold),
closable + closeBtnAria (category-level close button),
ariaLabel, collapsedText /
expandedText (override the overflow toggle copy).
Slot: one
<li class="pf-v6-c-label-group__list-item">
per label include.
Overflow text token: the collapsedText default is
"REMAINING_PLACEHOLDER more". The Alpine
phaLabelGroup component substitutes
REMAINING_PLACEHOLDER for the hidden-count integer. We use the explicit token (not
{remaining} like PF React) because Qute would try to evaluate
{remaining} as a template expression.
Usage
Status shorthand vs. color + iconName. For semantic-tagged labels (validation results, status
indicators), reach for status — one parameter sets both the color modifier and the
conventional icon. For free-form colored tags (project tags, taxonomy labels), pass
color directly.
Editable labels need Alpine. The runtime template emits the
pf-m-editable class and a
tabindex="0"
content span, but the actual edit-in-place interaction lives in
phaLabelEditable. Listen for pha:label:edit-complete /
pha:label:edit-cancel events on the label to persist the change.
Group overflow. The phaLabelGroup Alpine component hides
<li> items past numLabels and renders an "N more"
toggle. Combine with categoryName for filter chip stacks, or
vertical=true for side-panel facets.
Add button. The variant="add" +
phaLabelGroupAdd pattern uses a hidden
<template> cloned per new label. The template defines the per-row markup once;
the Alpine component stamps it into the list each time the user submits.