Label
Categorizes an item with compact, recognizable metadata.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlLabel } from "gitlab-ui-react/label";<GlLabel
backgroundColor="#D9C2EE"
title="Documentation"
target="#documentation" />Default
Use labels to classify items such as issues, merge requests, and projects. Choose concise titles and colors that remain distinguishable alongside the text.
Default label
import { GlLabel } from "gitlab-ui-react/label";
export default function LabelExample() {
return <GlLabel backgroundColor="#D9C2EE" title="Documentation" target="#documentation" />;
}
Scoped labels
Set scoped to visually separate the key and value at the final ::.
Scoped labels
import { GlLabel } from "gitlab-ui-react/label";
export default function LabelScopedExample() {
return (
<div className="flex flex-wrap gap-3">
<GlLabel
backgroundColor="#CBE2F9"
scoped
title="workflow::review"
target="#review" />
<GlLabel
backgroundColor="#FDD4CD"
scoped
title="priority::high"
target="#high-priority" />
</div>
);
}
Tooltip
Add description when a label needs supplemental context. The optional footer provides secondary metadata in the same tooltip.
Label with tooltip
import { GlLabel } from "gitlab-ui-react/label";
export default function LabelTooltipExample() {
return (
<GlLabel
backgroundColor="#CBE2F9"
description="Tracks work that is ready for review."
footer="Project label"
title="Ready for review"
target="#ready-for-review" />
);
}
Removable labels
Set showCloseButton and remove the label from parent state in onClose. Use this only when removing the classification is an available action.
Removable labels
frontenddocumentation
import { useState } from "react";
import { GlLabel } from "gitlab-ui-react/label";
const initialLabels = [
{ backgroundColor: "#CBE2F9", title: "frontend" },
{ backgroundColor: "#D9C2EE", title: "documentation" },
];
export default function LabelDismissibleExample() {
const [labels, setLabels] = useState(initialLabels);
return (
<div className="flex flex-wrap gap-3">
{labels.map((label) => (
<GlLabel
key={label.title}
backgroundColor={label.backgroundColor}
onClose={() => setLabels((current) => (
current.filter((item) => item.title !== label.title)
))}
showCloseButton
title={label.title} />
))}
</div>
);
}
Accessibility
- Keep the visible title meaningful because color alone must not communicate the category.
- When
targetis present, the title becomes a link. Use a real destination when the label navigates. - If
showCloseButtonis enabled, provideonCloseand remove the label from state when the button is activated. - The remove button receives an accessible name derived from
title; localize surrounding instructions as needed.
API
GlLabel also forwards supported <span> attributes.
| Prop | Description | Default |
|---|---|---|
backgroundColor |
Sets the label background and determines a contrasting text color. | Required |
title |
Sets the visible label text and link name. | Required |
target |
Turns the title into a link to this URL. | "" |
scoped |
Splits the title at its final ::. |
false |
description |
Adds descriptive tooltip content. | "" |
footer |
Adds muted footer text to the tooltip. | "" |
showCloseButton |
Shows a remove button. | false |
disabled |
Disables the remove button. | false |
onClose |
Runs when the remove button is activated. | — |
tooltipPlacement |
Places the tooltip on top, right, bottom, or left. |
"top" |