---
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']
ready: true
figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=6084-28401'
source: https://github.com/primer/brand/blob/main/packages/react/src/Label/Label.tsx
storybook: '/brand/storybook/?path=/story/components-label--playground'
a11yReviewed: true
---

```js
import {Label, Stack, Text} from '@primer/react-brand'
```

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. Never use
Label as an isolated eyebrow or pre-heading marker.

## Examples

### Default

The default Label uses the `medium` size and `default` color. Keep it visually attached to the record it describes.

```jsx
<Stack direction="horizontal" alignItems="center" padding="none">
  <Label>In progress</Label>
</Stack>
```

### Sizes

Use the `size` prop to fit the density and emphasis of product UI metadata. Prefer the smallest size that remains
legible. Do not choose a size based on a nearby heading.

```jsx
<Stack direction="horizontal" alignItems="center" padding="none">
  <Label size="small">Small</Label>
  <Label size="medium">Medium</Label>
  <Label size="large">Large</Label>
</Stack>
```

### Color

Use the `color` prop to distinguish metadata attached to the same record. Do not rely on color alone to communicate
status.

```jsx
<Stack direction="horizontal" alignItems="center" padding="none" flexWrap="wrap">
  <Label color="red">Bug</Label>
  <Label color="orange">High priority</Label>
  <Label color="blue">Needs review</Label>
</Stack>
```

### Leading visual

Add a leading icon only when it makes product UI metadata easier to scan. Use an [Octicon](https://primer.style/octicons)
that reinforces the metadata meaning.

```jsx
<Stack direction="horizontal" alignItems="center" padding="none">
  <Label color="yellow" leadingVisual={<StarIcon />}>
    Starred
  </Label>
</Stack>
```

## Component props

### Label

| Name            | Type           |   Default   | Description                                         |
| :-------------- | :------------- | :---------: | :-------------------------------------------------- |
| `leadingVisual` | `ReactElement` | `undefined` | The leading visual appears before the Label content |
| `size`          | `LabelSizes`   |  `'medium'` | The size variations available in Label              |
| `color`         | `LabelColors`  | `'default'` | The color variations available in Label             |