Label

A label is a descriptive annotation that adds context to an element for clarity and convenience.

Examples

Filled

Non-status:

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label, max-width truncation customization Grey label with icon and set max-width truncation customization Grey link removable (disabled)

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label, max-width truncation customization Blue label with icon and set max-width truncation customization Blue link removable (disabled)

Green Green icon Green removable Green icon removable Green link Green link removable Green label, max-width truncation customization Green label with icon and set max-width truncation customization Green link removable (disabled)

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label, max-width truncation customization Orange label with icon and set max-width truncation customization Orange link removable (disabled)

Red Red icon Red removable Red icon removable Red link Red link removable Red label, max-width truncation customization Red label with icon and set max-width truncation customization Red link removable (disabled)

Orange red Orange red icon Orange red removable Orange red icon removable Orange red link Orange red link removable Orange red label, max-width truncation customization Orange red label with icon and set max-width truncation customization Orange red link removable (disabled)

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label, max-width truncation customization Purple label with icon and set max-width truncation customization Purple link removable (disabled)

Teal Teal icon Teal removable Teal icon removable Teal link Teal link removable Teal label, max-width truncation customization Teal label with icon and set max-width truncation customization Teal link removable (disabled)

Yellow Yellow icon Yellow removable Yellow icon removable Yellow link Yellow link removable Yellow label, max-width truncation customization Yellow label with icon and set max-width truncation customization Yellow link removable (disabled)

Status:

Success Success removable Success link Success link removable Success, max-width truncation customization Success removable, max-width truncation customization Success link removable (disabled)

Warning Warning removable Warning link Warning link removable Warning, max-width truncation customization Warning removable, max-width truncation customization Warning link removable (disabled)

Danger Danger removable Danger link Danger link removable Danger, max-width truncation customization Danger removable, max-width truncation customization Danger link removable (disabled)

Info Info removable Info link Info link removable Info, max-width truncation customization Info removable, max-width truncation customization Info link removable (disabled)

Custom Custom removable Custom link Custom link removable Custom, max-width truncation customization Custom removable, max-width truncation customization Custom link removable (disabled)

Outline

Compact

Compact Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label, max-width truncation customization Compact label with icon and set max-width truncation customization Compact link removable (disabled)

Compact Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label, max-width truncation customization Compact label with icon and set max-width truncation customization Compact link removable (disabled)

Overflow

This style of label is used to indicate overflow within a label group.

Editable

Note: Editable label behavior must be handled with JavaScript.

Add label

This style of label is used to add new labels to a label group.

Basic label group

Use a label group to display multiple labels at once.

Label 1
Label 2
Label 3

Label group with overflow

Label 1
Label 2
Label 3

Label group with overflow expanded

Label 1
Label 2
Label 3
Label 4
Label 5

Editable label group with add button

The contents of a label group can be modified by removing labels or adding new ones using the Add button.

Label 1
Label 2
Label 3

Label group with category label

Label 1
Label 2
Label 3

Label group with removable categories

Label 1
Label 2
Label 3
Label 4
Label 5
Label 6

Vertical label group

Label 1
Label 2
Label 3

Vertical label group with overflow

Label 1
Label 2
Label 3

Vertical label group with overflow expanded

Label 1
Label 2
Label 3
Label 4
Label 5

Vertical label group with category

Label 1
Label 2
Label 3

Vertical label group with removable category

Label 1
Label 2
Label 3

In addition to the JavaScript management of editable labels, dynamic label groups also need:

.pf-v6-c-label-group.pf-m-editable onClick event should (excluding labels within) set focus on .pf-v6-c-label-group__textarea

Editable labels, dynamic label group

Editable labels, label active, dynamic label group

Static labels, dynamic label group

Static label 1
Static label 2
Static label 3

Mixed labels (static / editable), dynamic label group

Static label 1
Static label 2

Label group with compact labels

Label 1
Label 2
Label 3

Label group with compact labels and overflow

Label 1
Label 2
Label 3

Vertical label group with compact labels

Label 1
Label 2
Label 3

Labels with truncation

Label

Label with set max-width truncation

Label group

Label 1
Label 2
Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula

Label group vertical

Label 1
Label 2
Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula

Documentation

Label usage

Class	Applied to	Outcome
`.pf-v6-c-label`	`<span>`, `<button>`	Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. Required. Note: always use with either `.pf-m-filled` or `.pf-m-outline`.
`.pf-v6-c-label__content`	`<span>`, `<a>`, `<button>`	Creates a content wrapper. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. Required
`.pf-v6-c-label__icon`	`<span>`	Initiates a label icon.
`.pf-v6-c-label__text`	`<span>`	Initiates label text. Required
`.pf-v6-c-label__editable-text`	`<button>`, `<input>`	Initiates editable label text. See the editable example for details about handling behavior in Javascript.
`.pf-v6-c-label__actions`	`<span>`	Creates a wrapper for label actions. Required for removable labels
`.pf-m-filled`	`.pf-v6-c-label`	Modifies label for filled styles.
`.pf-m-outline`	`.pf-v6-c-label`	Modifies label for outline styles.
`.pf-m-compact`	`.pf-v6-c-label`	Modifies label for compact styles.
`.pf-m-overflow`	`.pf-v6-c-label`	Modifies label for overflow styles for use in a label group.
`.pf-m-add`	`.pf-v6-c-label`	Modifies label for add styles for use in a label group.
`.pf-m-blue`	`.pf-v6-c-label`	Modifies the label to have blue colored styling.
`.pf-m-green`	`.pf-v6-c-label`	Modifies the label to have green colored styling.
`.pf-m-orange`	`.pf-v6-c-label`	Modifies the label to have orange colored styling.
`.pf-m-red`	`.pf-v6-c-label`	Modifies the label to have red colored styling.
`.pf-m-purple`	`.pf-v6-c-label`	Modifies the label to have purple colored styling.
`.pf-m-teal`	`.pf-v6-c-label`	Modifies the label to have teal colored styling.
`.pf-m-yellow`	`.pf-v6-c-label`	Modifies the label to have yellow colored styling.
`.pf-m-success`	`.pf-v6-c-label`	Modifies the label to have success colored styling.
`.pf-m-warning`	`.pf-v6-c-label`	Modifies the label to have warning colored styling.
`.pf-m-danger`	`.pf-v6-c-label`	Modifies the label to have danger colored styling.
`.pf-m-info`	`.pf-v6-c-label`	Modifies the label to have info colored styling.
`.pf-m-custom`	`.pf-v6-c-label`	Modifies the label to have custom colored styling.
`.pf-m-disabled`	`.pf-v6-c-label`	Modifies label for disabled styles.
`.pf-m-editable`	`.pf-v6-c-label`	Modifies label for editable styles.
`.pf-m-editable-active`	`.pf-v6-c-label.pf-m-editable`	Modifies editable label for active styles.
`--pf-v6-c-label__text--MaxWidth`	`.pf-v6-c-label`	Modifiex the max width of the text before text will truncate.

Label group accessibility

Attribute	Applied to	Outcome
`role="list"`	`.pf-v6-c-label-group__list`	Indicates that the label group list is a list element. This role is redundant since `.pf-v6-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. Required
`aria-label="[button label text]"`	`.pf-v6-c-label-group__close > button`	Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. Required
`aria-labelledby="[id value of .pf-v6-c-label-group__close > button] [id value of .pf-v6-c-label-group__label]"`	`.pf-v6-c-label-group__close > button`	Provides an accessible name for the button. Required
`aria-label="[label text]"`	`.pf-v6-c-label-group__textarea`	Provides an accessible name for the textarea. Required
`row="1"`	`.pf-v6-c-label-group__textarea`	Indicates that the label group textarea is one row. Required
`tabindex="0"`	`.pf-v6-c-label-group__textarea`	Inserts the label group textarea into the tab order of the page so that it is focusable. Required

Label group usage

Class	Applied to	Outcome
`.pf-v6-c-label-group`	`<div>`	Initiates the label group component. Required.
`.pf-v6-c-label-group__list`	`<ul>`	Initiates the container for a list of labels. Required.
`.pf-v6-c-label-group__list-item`	`<li>`	Initiates the list item inside of the label group. Required.
`.pf-v6-c-label-group__main`	`<div>`	Initiates the main element in the label group. Required when label and list are present
`.pf-v6-c-label-group__textarea`	`<textarea>`	Initiates the textarea element in the label group. Required when label group is editable
`.pf-v6-c-label-group__label`	`<span>`	Initiates the label to be used in the label group.
`.pf-v6-c-label-group__close`	`<div>`	Initiates the container used for the button to remove the label group.
`.pf-v6-c-button`	`.pf-v6-c-label-group__close <button>`	Initiates the button used to remove the label group.
`.pf-m-editable`	`.pf-v6-c-label-group`	Modifies the label group to support editable styling.
`.pf-m-category`	`.pf-v6-c-label-group`	Modifies the label group to support category styling.
`.pf-m-textarea`	`.pf-v6-c-label-group__list-item`	Modifies the label group list item to support textarea.

Edit this page on GitHub