---
title: Label
description: Use label to display short status or metadata attached to an object in product-like UI.
keywords: ['product UI', 'data table', 'issue metadata', 'status', 'indicator']
---

![An image showing a group of labels with different styles, colors, leading icons and content.](https://github.com/primer/brand/assets/6951037/1c9c6b81-0a2a-4a56-a9f5-a9608f89e220)

## Usage

Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row,
dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Label is
not interactive and should not be used as an isolated eyebrow or pre-heading marker.

Choose a size and color that fit the surrounding product UI without relying on color alone to communicate meaning.

### Content

Use Label with short, scannable text. A single word is ideal. Use two or more words only when a record's status needs more context, such as “Limited availability" or “Enterprise only".

## Options

### Size

Labels come in three sizes: `small`, `medium`, and `large`. Prefer the smallest size that remains legible in the product UI context.

### Small

Use the `small` size for compact data rows and issue-style metadata.

### Medium

Use the `medium` size when record metadata needs more emphasis than the small treatment.

### Large

Use the `large` size only when product-like UI needs a particularly prominent status treatment.

### Color

Label offers color options from the [Primer Brand color palette](../../primitives/color.md). Choose a color that helps distinguish record metadata without relying on color alone to communicate status.

![An image showing multiple label options with different colors.](https://github.com/primer/brand/assets/6951037/41817520-87bb-41bc-9586-95155604b83d)

### Leading visual

You can add a leading icon to enhance the visual context. It is recommended you use an [Octicon](https://primer.style/octicons). Use an icon that reinforces the meaning of the label. For example, a `StarIcon` for a "Starred" label.

![An image showing multiple label options with different leading visuals.](https://github.com/primer/brand/assets/6951037/d5fdf463-f5ce-4806-886d-1b8f44278308)

## Related components

- [Button](../Button/index.md): To provide an action.
- Link: To provide navigation.