Labels

VIEW IN CLAY

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

default size default color label

Usage

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

Sizes

SizeUsage
default label small sizeSmall: Use the small label when the label doesn't need emphasized. Always use uppercase text for the small label.
default label default sizeDefault: Use the default size to mark states. Lowercase is acceptable for this size.

Dos and Don'ts

  1. Labels categorize information and provide quick recognition.
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 in labels.
default label

Do

default label with ellipsis

Don't

Variations

Simple label

Use the simple label to identify or filter content, tag content, show status, or even to provide navigation to elements. Labels can use status colors.

default size default color close option label

Removable label

Use the removeable label in filter bars, categories, etc. A removable label should always be the default size and have no status color.

default size default color close option label

You can use labels to link to link to related content in a site.

default size default color link label

Attributes

Small size metrics:

label small size metrics

Default size metrics:

label default size metrics

Menu