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.

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
  • Label 4
  • Label 5
  • Label 6

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__main<div>Initiates the main element in the label group. Required when label and list are present
.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--MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__list--MarginRight
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-category--PaddingTop
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingRight
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingBottom
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group--m-category--BorderRadius
3px
.pf-c-label-group--pf-c-label-group--m-category--BorderWidth
1px
.pf-c-label-group--pf-c-label-group--m-category--BorderColor
#f0f0f0
.pf-c-label-group--pf-c-label-group--m-category--BackgroundColor
#fff
.pf-c-label-group--pf-c-label-group__label--MarginRight
0.5rem
.pf-c-label-group--pf-c-label-group__label--MarginBottom
0
.pf-c-label-group--pf-c-label-group--m-vertical__label--MarginBottom
0.5rem
.pf-c-label-group--pf-c-label-group__label--FontSize
0.875rem
.pf-c-label-group--pf-c-label-group__label--MaxWidth
18ch
.pf-c-label-group--pf-c-label-group__close--MarginTop
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__close--MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginRight
calc(0.5rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginLeft
calc(0.5rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingRight
0.5rem
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group__list-item--MarginRight
0.25rem
.pf-c-label-group--pf-c-label-group__list-item--MarginBottom
0.25rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list-item--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginBottom
0.5rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginTop
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginLeft
calc(0.5rem * -1)
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-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--MarginBottom
0
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingRight
0.5rem

View source on Github