Skip to main content

Label

Use the label component to add metadata or indicate the status of items.

Ready to useReviewed for accessibility
GitHub
Figma
Storybook
import {Label} from '@primer/react-brand'

Examples

Default

This is the default variant for the Labelcomponent. It corresponds to the medium size and default color.

Loading

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.

Loading

Color

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

Loading

Leading visual

You can add a leading icon to enhance the visual context. It is recommended you use an Octicon here.

Loading

Component props

Label

NameTypeDefaultDescription
leadingVisualReactElementundefinedThe leading visual appears before the Label content
size'small'
'medium'
'large'
'medium'The size variations available in Label
color'default'
'blue'
'coral'
'green'
'gray'
'indigo'
'lemon'
'lime'
'orange'
'pink'
'purple'
'red'
'teal'
'yellow'
'blue-purple'
'green-blue'
'pink-blue'
'purple-red'
'red-orange'
'green-blue-purple'
'default'The color variations available in Label