Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailDockEmailPage TemplateRelated Items
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
ListLists vs TablesTile
DST Resources
ContributeCurrent InitiativesDevelopmentFigma LibrariesSpotlightUser TestingFeedback

Pill

Pills are used to highlight important information in a list or form such as a status.
Pill intro image
Demo and Developer GuidelinesFigma Component

Anatomy

Label

Labels are uppercase without punctuation.
‍
Character count limit: 30
Pill label that wraps
An example of a pill that wraps. This should not happen unless translation elongates a pill’s label.

Container

The pill can be any of these colors: gray (default), blue, green, yellow, red, cyan and magenta. We suggest using semantic colors (red, yellow, green) for statuses.

Behavior

Status Types

When used for statuses, use the following color assignments.
Color assignments demonstrate general status types. Custom labels can also be used.

Other Usages

If there is a need for a Pilot and Beta pill, please use cyan and magenta pills respectively.

Placement

The pill should always be placed with at least 12px margin on all sides.
Correct usage of a pill with 12px margin
Correct
Incorrect usage of pill with no margin
Incorrect

Specifications

Status Types

Color & Typography