Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Labels

Sign In
View in FigmaView in ClayDocumentation

Labels are a visual pattern used to categorize information providing quick and easy recognition.

Overview

Labels can be applied in a wide range of cases as a mechanism to tag content, show status, filter content or even provide navigation to elements of the same identification.

labels

Simple labels

Use simple labels to identify or filter content, tag content, show status or even to provide navigation to elements.

Simple labels

Simple labels can use status colors to highlight the status of an element to provide quick recognition. Simple status labels use colors to indicate meaning and they can be bold or outline. The colors are chosen intentionally so that users can recognize them easily.

Outline status labels

Use outline status labels by default and in places where there are many status labels on the same screen such as in tables, lists...etc.

Outline status labels

In the following image, you can see different status labels in a table. In this example, outline status labels are used as they dominate the screen.


Outline status labels in a table

Bold status labels

Bold status labels are used in an infrequent manner to draw attention to important information. For example, in headers when you need to differentiate a label from the rest of the labels in a list. Do not use bold labels as default or alongside many other status labels. Background color and text in bold status labels have a minimum contrast ratio of 5:1 for each color.

Bold status labels

In the image below, you can see different status labels in a table and a status label in the header section. In this example, a bold status label is used in the header to differentiate it from other labels.


Bold status labels in header and outline status labels in a table

Removable label

Use the removable label in filter bars, categories, etc. A removable label should always be the default size and have no status color. It contains a close icon to remove the label.

label removable

Removable label with sticker

This label is a variation from label removable, which can only be used with a default size. You can use this label with icons or round stickers.

Removable label with sticker

The label must never be longer than the available space. However, there are cases in which removable labels need to be placed in a second line or as a last option it will be truncated.

Removable labela with sticker break line

You can use labels of any size to link related content to a site.

default size default color link label

Use cases examples:

  • Status label with link to trigger a modal with detailed information
  • Category label to trigger a popover with additional categories

Category label to trigger extra information

Sizes

Small

Use the small label when the label doesn’t need emphasis. Always use uppercase text for the small label. Small labels are usually used in tables, list and cards. |

default label small size

Default

Use the default size to mark states. The use of lowercase is acceptable for this size. We recommend using the default label outside of tables like for example in headers.

default label default size

Dos and Don'ts

  1. Labels categorize information and provide quick recognition. They do not contain badges.
Simple label

Do

Label with sticker inside

Don't



  1. Labels can only contain one line of text.
default label

Do

default label with 2 lines of text

Don't



  1. Never use Ellipsis on labels.
default label

Do

default label with ellipsis

Don't



  1. Keep your text short, up to 1 or 2 words.
default label

Do

default label long

Don't



  1. Don’t use bold status labels alongside many other status labels.
Outline Status Labels in a Table

Do

Bold Status Labels in a Table Dont

Don't



  1. Use color labels for status only.
SuccessLabel

Do

Bold Status Labels in a Table Dont

Avoid

Something to improve? Report an issue!
Menu