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

Default example

Default labelDarker gray labelDefault outline label
<Label m={1}>Default label</Label>
<Label m={1} scheme="gray-darker">Darker gray label</Label>
<Label m={1} outline>Default outline label</Label>

System props

Label components get COMMON system props. Read our 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
Edit this page on GitHub