Label
Use the label component to add metadata or indicate the status of items.
On this page
On this page
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.
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.
Color
Use the color prop to change the color of the Label component. The default color is recommended for use with neutral backgrounds.
Leading visual
You can add a leading icon to enhance the visual context. It is recommended you use an Octicon here.
Component props
Label
| Name | Type | Default | Description |
|---|---|---|---|
leadingVisual | ReactElement | undefined | The 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 |