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

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'gray.5'Part of the COMMON system props, used to change the background of the label.
Edit this page on GitHub
2 contributorsemplumsBinaryMuse
Last edited by emplums on February 21, 2020