#Overview

A label tags an object according to provided keywords, so that the user can classify and identify the object at a glance.

overview
  1. Filled red
  2. Filled green
  3. Outlined

#When to use

  • Products that receive a discount when on sale
  • To highlight a product status
  • Selectable options only receive a label when an option has clear user benefits, for example when a product can be delivered faster from a supplier
  • Information about a specific product status (such as used, new)
  • Information about the product being represented in a showroom

#Don’t use for

  • To filter content, or to display a static status that represents a user’s selection (use a Chip)
  • Displaying a static status with only numbers (use a Badge)

#Placement

#Product tile

product-tile

#Product Detail Page (PDP)

product-tile

#States

states