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'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 March 4, 2021