Skip to Content
Patternfly Logo

Label group

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesCSS Variables

Examples

Basic

  • Label
  • Label 2
  • Label 3

Overflow

  • Label
  • Label 2
  • Label 3

Overflow expanded

  • Label
  • Label 2
  • Label 3
  • Label 3
  • Label 3

Category

  • Label
  • Label 2
  • Label 3

Category removable

  • Label
  • Label 2
  • Label 3

Vertical

  • Label
  • Label 2
  • Label 3

Vertical overflow

  • Label
  • Label 2
  • Label 3

Vertical overflow expanded

  • Label
  • Label 2
  • Label 3
  • Label 3
  • Label 3

Vertical category

  • Label
  • Label 2
  • Label 3

Vertical category removable

  • Label
  • Label 2
  • Label 3

Accessibility

AttributeApplied toOutcome
role="list".pf-c-label-group__listIndicates that the label group list is a list element. This role is redundant since .pf-c-label-group__list is a <ul> but is required for screen readers to announce the list propertly. Required
aria-label="[button label text]".pf-c-label-group__close > buttonProvides 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-c-label-group__close > button] [id value of .pf-c-label-group__label]".pf-c-label-group__close > buttonProvides an accessible name for the button. Required

Usage

ClassApplied toOutcome
.pf-c-label-group<div>Initiates the label group component. Required.
.pf-c-label-group__list<ul>Initiates the container for a list of labels. Required.
.pf-c-label-group__list-item<li>Initiates the list item inside of the label group. Required.
.pf-c-label-group__label<span>Initiates the label to be used in the label group.
.pf-c-label-group__close<div>Initiates the container used for the button to remove the label group.
.pf-c-button.pf-c-label-group__close <button>Initiates the button used to remove the label group.
.pf-m-category.pf-c-label-groupModifies the label group to support category styling.

CSS Variables

.pf-c-label-group--pf-c-label-group__list--MarginBottomc_label_group__list_MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__list--MarginRightc_label_group__list_MarginRight
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-category--PaddingTopc_label_group_m_category_PaddingTop
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingRightc_label_group_m_category_PaddingRight
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingBottomc_label_group_m_category_PaddingBottom
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingLeftc_label_group_m_category_PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group--m-category--BorderRadiusc_label_group_m_category_BorderRadius
3px
.pf-c-label-group--pf-c-label-group--m-category--BorderWidthc_label_group_m_category_BorderWidth
1px
.pf-c-label-group--pf-c-label-group--m-category--BorderColorc_label_group_m_category_BorderColor
#f0f0f0
.pf-c-label-group--pf-c-label-group--m-category--BackgroundColorc_label_group_m_category_BackgroundColor
#fff
.pf-c-label-group--pf-c-label-group__label--MarginRightc_label_group__label_MarginRight
0.5rem
.pf-c-label-group--pf-c-label-group__label--MarginBottomc_label_group__label_MarginBottom
0
.pf-c-label-group--pf-c-label-group--m-vertical__label--MarginBottomc_label_group_m_vertical__label_MarginBottom
0.5rem
.pf-c-label-group--pf-c-label-group__label--FontSizec_label_group__label_FontSize
0.875rem
.pf-c-label-group--pf-c-label-group__label--MaxWidthc_label_group__label_MaxWidth
18ch
.pf-c-label-group--pf-c-label-group__close--MarginTopc_label_group__close_MarginTop
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__close--MarginBottomc_label_group__close_MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginRightc_label_group_m_vertical__close_MarginRight
calc(0.5rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginLeftc_label_group_m_vertical__close_MarginLeft
calc(0.5rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingRightc_label_group_m_vertical__close_c_button_PaddingRight
0.5rem
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingLeftc_label_group_m_vertical__close_c_button_PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group__list-item--MarginRightc_label_group__list_item_MarginRight
0.25rem
.pf-c-label-group--pf-c-label-group__list-item--MarginBottomc_label_group__list_item_MarginBottom
0.25rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginRightc_label_group__list_MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginBottomc_label_group__list_MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list-item--MarginRightc_label_group__list_item_MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginRightc_label_group__label_MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginBottomc_label_group__label_MarginBottom
0.5rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginTopc_label_group__close_MarginTop
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginLeftc_label_group__close_MarginLeft
calc(0.5rem * -1)
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginBottomc_label_group__close_MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginRightc_label_group__close_MarginRight
calc(0.5rem * -1)
.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child--pf-c-label-group__list-item--MarginBottomc_label_group__list_item_MarginBottom
0
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingLeftc_button_PaddingLeft
0.5rem
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingRightc_button_PaddingRight
0.5rem