Badges

Also known as tags, lozenges, and chips, badges assist users to quickly recognize new or categorized content.

Use badges to give users information about the status of an object or action they've taken.

Types

Four different badge styles are available and can be used separately, inside links, and within buttons.

Status

Indicates status changes or objects that may demand the user's attention. Size is determined by the text's height. Colors can be mixed and matched by the designer.

See the Pen Badges - Status by USANA UX (@usana_ux) on CodePen.

Number

Number/count badges summarize the number of items in an asset that require attention and/or have been allocated to an activity. Three-digit numbers are okay but should be avoided, if possible.

See the Pen Badges by USANA UX (@usana_ux) on CodePen.

Selection

A selection badge should only be used for multi-select assets to show what the user has previously picked or chosen.

See the Pen Badges - Selection by USANA UX (@usana_ux) on CodePen.

Attention

Used to direct users' attention to a specific element or component in a subtle way.

See the Pen Badges - Attention by USANA UX (@usana_ux) on CodePen.

Guidelines

Anatomy

Container: A badges primary element that is color-coded.
Label: Descriptive text about the badge.
Icon : (An optional choice) Acceptable icon.

Specifications

In order to build pixel-perfect components, badge specifications are available for designers and developers.
‍

Use badges for counts of important information, near the applicable item.
Use badges to alert or call attention to something that has changed or new.