Skip to content
Patternfly Logo

Label

A label highlights an element on a page to draw attention to it or make it more searchable. Labels can also be used to tag items of the same category.

If you want to show a count, use a badge instead.

Usage

Labels are easily customized to fit different use cases. There are two main types of labels:

  1. Unfilled
Unfilled labels
  1. Filled
Filled labels

Use the filled option to add more visual prominence to a label. If your use case requires a mix of clickable and non-clickable labels, consider using unfilled for clickable and filled for non-clickable. Whatever convention you choose, be sure to maintain consistency through your UI.

The default colors for labels are gray, blue, green, orange, red, purple, and cyan. We offer a wide array of colors to allow for color coding labels within UIs. If desired, label colors can be used to indicate status. Regardless, we recommend you avoid using the red or green labels unless they indicate danger/error or success, respectively.

While you may use other colors for your labels, we recommend using the ones provided as they have been carefully selected to be accessible with the PatternFly library. If you choose to use other colors, be mindful of picking accessible text colors and icon colors to go with the label background.

Label features

You can further customize labels by making them dismissable, adding icons, or making them clickable links. You can use any combination of these features in a single label.

Examples of different types of labels
  1. Dismissible label: Can be dismissed by clicking on the “x”
  2. Label with icon: Can be used to further clarify the label
  3. Clickable label: Has a hover state to show interactiveness

When to use dismissable labels

For labels that are easily removed or dismissed, use a dismissable label. A common use case for dismissable labels is when users can edit labels.

Example of dismissable labels

When to use labels with icons

Optionally add an icon to your label in cases where additional visual information is helpful.

Example of different colored labels with icons

You can also use them to distinguish labels of the same color if needed.

Example of labels of the same color with icons

When to use clickable labels

You can also make labels clickable. A common use case for clickable labels is when a user may want to filter by a specific label. You can also use label links to redirect users to a new page. Clickable labels have hover and focus states.

Example of a clickable label

Labels in context

Labels can be used almost anywhere in a UI, but are commonly used in table views and catalogs.

Example labels in a tableExample labels in a catalog
View source on GitHub