--- id: Label section: components cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group'] ---import './Label.css' ## Examples ### Filled ```html 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 ```html 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) ``` ### Compact ```html 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. ```html ``` ### Editable **Note: Editable label behavior must be handled with JavaScript.** ```html ``` ### Add label This style of label is used to add new labels to a label group. ```html ``` ### Basic label group Use a label group to display multiple labels at once. ```html


``` ### Label group with overflow ```html
``` ### Label group with overflow expanded ```html
``` ### 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. ```html
``` ### Label group with category label ```html
``` ### Label group with removable categories ```html
``` ### Vertical label group ```html
``` ### Vertical label group with overflow ```html
``` ### Vertical label group with overflow expanded ```html
``` ### Vertical label group with category ```html
``` ### Vertical label group with removable category ```html
``` In addition to the JavaScript management of [editable labels](/components/label#editable), 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 ```html
``` ### Editable labels, label active, dynamic label group ```html
``` ### Static labels, dynamic label group ```html
``` ### Mixed labels (static / editable), dynamic label group ```html
``` ### Label group with compact labels ```html
``` ### Label group with compact labels and overflow ```html
``` ### Vertical label group with compact labels ```html
``` ### Labels with truncation ```html
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` | ``, `