@primer/react-brand/docs/components/Label/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Label
description: Use the label component to add metadata or indicate the status of items.
keywords: ['badge', 'tag', '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} from '@primer/react-brand'
```

## Examples

### Default

This is the default variant for the `Label`component. It corresponds to the `medium` size and `default` color.

```jsx
<Label>Default</Label>
```

### Sizes

Use the `size` prop to adjust the size of the `Label` component. The `small` size is ideal for body text. The `medium` size is recommended for small headings and `large` is suitable for large headings or section intros.

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

### Color

Use the `color` prop to change the color of the `Label` component. The `default` color is recommended for use with neutral backgrounds.

```jsx
<Stack direction="horizontal" alignItems="flex-start" padding="none">
  <Label color="blue">Blue</Label>
  <Label color="red">Red</Label>
  <Label color="green-blue">Green blue</Label>
  <Label color="red">Red</Label>
  <Label color="pink-blue">Pink blue</Label>
  <Label color="orange">Orange</Label>
</Stack>
```

### Leading visual

You can add a leading icon to enhance the visual context. It is recommended you use an [Octicon](https://primer.style/octicons) here.

```jsx
<Stack direction="horizontal" alignItems="flex-start" padding="none">
  <Label color="yellow" leadingVisual={<StarIcon />}>
    Starred
  </Label>
  <Label color="blue-purple" leadingVisual={<CopilotIcon />}>
    Copilot
  </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             |