Label Guidelines

Labels can be used to identify an element, show status to the user or to find content in the same category.

Best Practices

Labels should:

Have clearly identifiable text, when using pre-defined ones, they shouldn't be too similar.
Support identification in other ways too, like color, position and tooltips.
Include a close button if they are removable, provide users an obvious way to reapply a label once removed.
Clearly indicate what the status is when used as a status identifier, and should be mapped to the component the status refers to.
Have capitalized words for built-in labels, these are easier to read.
Contain short expressions to make identification easier.

Labels can be used both as inline elements and block elements, depending on the display type of the UI elements.

Labels have a slight margin on their right, so subsequent Labels don't get "squished together", which can be removed using our CSS utility classes.