The Label component is used to add contextual metadata to a design. Visually it styles text, adds padding, and rounded corners.

Note: The Label component is used to create some of the other components you'll find in the docs, e.g. StateLabel.

Default example

Default label
<Label m={1}>Default label</Label>

Different schemes or flavors

Darker gray labelGreen labelOrange labelPurple labelBlue labelDefault outline labelGreen outline label
<Label m={1} scheme="grayDarker">Darker gray label</Label>
<Label m={1} scheme="green">Green label</Label>
<Label m={1} scheme="orange">Orange label</Label>
<Label m={1} scheme="purple">Purple label</Label>
<Label m={1} scheme="blue">Blue label</Label>
<Label m={1} outline>Default outline label</Label>
<Label m={1} scheme="green" outline>Green outline label</Label>

Various sizes

Labels can be mapped to pre-defined padding sizes that automatically scale the font-size accordingly using the size prop. Alternatively, you can specify the left-right and top-bottom padding values using the px and py props, respectively, as demonstrated in the last label below (the orange one). Using the px and py prop approach will not auto-scale the font-size.

Gray labelGray labelGray labelGray labelBlue labelGreen outline labelGray labelGray label
<Label m={1} scheme="gray" size='large'>Gray label</Label>
<Label m={1} scheme="gray" size='xlarge'>Gray label</Label>
<Label m={1} scheme="grayDarker" size='xlarge'>Gray label</Label>
<Label m={1} scheme="purple" size='xlarge'>Gray label</Label>
<Label m={1} scheme="blue" size='xlarge'>Blue label</Label>
<Label m={1} scheme="green" size='xlarge' outline>Green outline label</Label>
<Label m={1} outline size='xlarge'>Gray label</Label>
<Label m={1} px={7} py={2} scheme='orange' outline>Gray label</Label>

Different radii, padding, width and onClick handlers

<Label m={1} scheme="grayDarker" radius='10px' px={2}>1</Label>
<Label m={1} scheme="grayDarker" radius='10px' width={'48px'}>0</Label>
<Label m={1} scheme="green" radius='none' width={'48px'} outline>0</Label>
<Label m={1} scheme="purple" radius='50%' p={5} onClick={() => alert('Answers to the Universe')}>42</Label>
<Label m={1} scheme="blue" size='small' radius='50%' p={5} onClick={() => alert('More Answers to the Universe')}>42</Label>

System props

Label components get BACKGROUND, BORDER, COMMON, FLEX_CONTAINER and TYPOGRAPHY system props. Read the System Props doc page for a full list of available props.

Component props

outlineBooleanCreates an outline style label
sizeString'medium'Can be one of small, medium (default), large or xl .
dropshadowBooleanAdds a dropshadow to the label
onClickFunctioncustom event handler for onClick
radiusString3pxuse px and percent values, or none and round different border radii
schemeStringuse default, gray, grayDarker, green, orange, purple for different label variants
sizeStringmediumuse small for a small Button, or large for a large Button. pr xlarge for an even larger button