Skip to content


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

Default example

smallmedium (default)largexl label
good first issue🚂 deploy: traincssdocumentationprimer

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

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
variantString'medium'Can be one of small, medium (default), large or xl .
dropshadowBooleanAdds a dropshadow to the label
bgString'label.primary.border'Part of the COMMON system props, used to change the background of the label.
Edit this page on GitHub
3 contributorsVanAndersonemplumsBinaryMuse
Last edited by VanAnderson on July 22, 2021