UI MarCom

Label Stable Dark theme

A small labeling component that can be attached to another object or simply stand alone.

General guidance

Labels can show keywords, notification status, category names, or quantities. They are restrained gray by default but can also be colored according to the palette of additional colors.

ElementLabelElement00
ElementLabelElement00
ElementLabelElement00
Label on different backgrounds

Standard Label

The standard Label is best for keywords. Although they are not limited in length, it is recommended to keep them as short as possible. Labels can be stuck to all text elements like headlines or menus.

ElementLabel

Superscript Label

The superscript Label shows numbers. Superscripted it can be stuck to icons and text and is limited in its length.

Element00

Dos and don’ts

  • Do not use long keywords in big Labels if there is no need for it. Keep them short.
  • Do not use colored Labels when there is no need for it. Colors should support the message.
  • Do not use icons inside Labels. They will become too small.
  • Do use Labels when you want to show static meta information. For interactive meta keywords use Tags.