--- id: Label section: components cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group'] ---import './Label.css' ## Examples ### Filled ```html 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)

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)

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

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label, max-width truncation customization Gold label with icon and set max-width truncation customization Gold link removable (disabled) ``` ### Outline ```html 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)

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)

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

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label, max-width truncation customization Gold label with icon and set max-width truncation customization Gold 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) ``` ### 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.** * `.pf-v5-c-label__editable-text` onClick event should: * Set `.pf-m-editable-active` on `.pf-v5-c-label` * Change `.pf-v5-c-label__editable-text`from a button to an input * Return keypress, when content is editable, should: * Be captured to prevent line wrapping and save updates to label text * Remove `.pf-m-editable-active` from `.pf-v5-c-label` * Esc keypress, when content is editable, should: * Undo any update to label text * Remove `.pf-m-editable-active` from `.pf-v5-c-label` * Change `.pf-v5-c-label__editable-text` back to a button ```html isBeta ``` ### Add label This style of label is used to add new labels to a label group. ```html isBeta ``` ### 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-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea` ### Editable labels, dynamic label group ```html isBeta
``` ### Editable labels, label active, dynamic label group ```html isBeta
``` ### Static labels, dynamic label group ```html
``` ### Mixed labels (static / editable), dynamic label group ```html isBeta
``` ### Label group with compact labels ```html
``` ### Label group with compact labels and overflow ```html
``` ### Vertical label group with compact labels ```html
``` ## Documentation ### Label usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-label` | ``, `