Labels

What problem does this solve?

Labels, like mentions and lozenges, are a way of visually tagging UI objects for quick recognition and navigation. They are used in taxonomies (tags) to provide an ad-hoc, user-generated scheme for classification and searching, or in multi-select controls to indicate already locked-in elements.

Labels can include an action icon (usually 'remove'). Bear in mind that they increase the amount of visual noise, particularly in combination with other visual tagging elements. They should be short and not require line-wrapping.

Interactive examples

Type Description
Label text A label with static text can be used as a flag or reference to an object or attribute
Label link If a label is linked, it should link to something that reveals more information about the label
Removable label(remove closableNoUrl) The removable label can be exposed in an "edit" mode or in multi-select controls
Removable label link(remove splitLabel) This label has both a close affordance and a link