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.
Labels are easily customized to fit different use cases. There are two main types of 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.
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.
- Dismissible label: Can be dismissed by clicking on the “x”
- Label with icon: Can be used to further clarify the label
- 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.
When to use labels with icons
Optionally add an icon to your label in cases where additional visual information is helpful.
You can also use them to distinguish labels of the same color if needed.
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.
Labels in context
Labels can be used almost anywhere in a UI, but are commonly used in table views and catalogs.
View source on GitHub