Label

Labels are editable objects that allow users to manually categorize other objects, like issues, merge requests, and epics. They have a name, description, and a customizable color. They provide a quick way to recognize which categories the labeled object belongs to.

Examples

Label
Open in Storybook
Loading story...
Scoped
Open in Storybook
Loading story...
With close
Open in Storybook
Loading story...

View in Pajamas UI Kit →

Structure

TODO:
Add structure image. Create an issue

Guidelines

When to use

TODO:
Add when to use. Create an issue

When not to use

  • If displaying more generic object metadata that are not categories, consider using badges.

Variants

  1. Scoped Labels: Scoped labels are a unique type of label, characterized by their mutually exclusive behavior. Each scoped label has a key and a value. An issue, epic, or merge request can only have one scoped label of a specific key. For example, if an issue has the label workflow::ready for design, it cannot have any other workflow:: labels at the same time. Applying a second workflow:: label will automatically replace the former. A scoped label is visually differentiated from a regular label by the contrasting colors on the left and right sides of the label.

Behavior

  • Clicking on a label filters the view, or navigates the user to a list view filtered by that label.
  • Users can manually filter lists and other types of views by labels.
  • Labels can include a close icon that, when clicked, remove the label from the interface.

Content

Description

  • A label's description is shown in a tooltip when hovering the label.

Accessibility

TODO:
Add accessibility guidelines. Create an issue

Last updated at: