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.

This is part of the design system extended layer 🤝 owned by group project management . Questions or feedback? Reach out to #g_project-management on slack.

Examples

Label

<gl-label
  background-color="#D9C2EE"
  title="Label title"
  target="#"
/>

Scoped

<gl-label
  background-color="#D9C2EE"
  title="scoped::label"
  target="#"
  scoped
/>

With close

<gl-label
  background-color="#D9C2EE"
  title="Label title"
  target="#"
  show-close-button
/>

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

Code reference

GlLabel

Loading story...

Last updated at: