Badges, Labels, and Stickers

Badges, labels, and stickers are used to put extra emphasis on information.

Badges

Description

Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders by default.

Sizes

SizeUsage
small size default color badgeSmall: Use it to mark the number of notifications in a user sticker.
defualt size default color badgeDefault: Use it for marking states.
large size default color badgeLarge: Use it when previous don't apply.

Types

TypeUsage
defualt size default color badgeUsed to identify.
defualt size default color close option badgeUsed to identify with the possibility of removing it.

Attributes

badge attributtes

Labels

Description

Labels are a mechanism to categorize information providing quick recognition.

Usage

Use labels to organize groups of items in your application. Labels have rounded borders by default.

Sizes

SizeUsage
small size default color labelSmall: Use it to mark the number of notifications in a user sticker.
defualt size default color labelDefault: Use it for marking states.
large size default color labelLarge: Use it when previous don't apply.

Types

TypeUsage
defualt size default color labelUsed to identify.
defualt size default color close option labelUsed to identify with the possibility of removing it.

Attributes

badge attributtes

Stickers

Description

Stickers are a visual way to quickly identify content in a different way than badges and labels. Stickers can be either numbers or characters but always restricted to a maximum number of 3 characters. A sticker can also contain just an icon. Stickers are always squared.

Usage

Use stickers to visually identify elements in a dataset that are part of a same group. You can use any color you want for stickers.

Sizes

SizeUsage
small size default color sticker22x22. Use it in smaller contexts where you only need visual identification but not manual interaction with this element.
defualt size default color sticker32x32. Use it in cards that are image based, allowing to see more parts of the image.
large size default color sticker44x44. Use it in cards that are not image based, or list entries.

Position

Stickers can have different positions:

  • Static
  • Inside (interior to the element that contains it) or outside (overlapping the border of the element that contains it):
    • Bottom left
    • Bottom right
    • Top left
    • Top right

sticker positions example

The most used cases in Liferay DE are inside bottom left and static.

Menu