Color

Primary

Primary Primary Container

Secondary

Secondary Secondary Container

Tertiary

Tertiary Tertiary Container

Error

Error Error Container

Neutral

Background

Surface tones

Surface Surface +1 Surface +2 Surface +3 Surface +4 Surface +5

Inverse

Inverse Surface Inverse Surface +1 Inverse Surface +2 Inverse Surface +3 Inverse Surface +4 Inverse Surface +5 Inverse Primary

Neutral variant

Surface Variant Surface Variant +1 Surface Variant +2 Surface Variant +3 Surface Variant +4 Surface Variant +5 Outline

Custom

Yellow

Yellow Yellow Container

Orange

Orange Orange Container

Green

Green Green Container

Alias

Alias Alias Container

Shape

Shape tokens

Extra small Small Medium Large Extra large Full

Shape token top modifier

Extra small top Small top Medium top Large top Extra large top

Shape token end modifier

Extra small end Small end Medium end Large end Extra large end

Typography

Roles

Display large Display medium Display small Headline large Headline medium Headline small Title large Title medium Title small Label large Label medium Label small Body large Body medium Body small

Buttons

Common Buttons

Elevated buttons

Elevated button Elevated button (disabled) Elevated icon button Elevated Surface-Tertiary button

Filled buttons

Filled button Filled button (Disabled)

Filled tonal buttons

Filled tonal button Filled tonal button (Disabled) Filled tonal button

Outlined buttons

Outlined button Outlined icon button Outlined surface icon button Outlined button (Disabled) Outlined icon button (Disabled)

Text buttons

0 Text button Tertiary text button Text button (Disabled) Icon text button (Disabled)

Custom buttons

Custom text button Custom elevated button Custom filled button Custom tonal button Custom outlined button Outlined button (Disabled) Outlined icon button (Disabled) Custom text button Custom elevated button Custom filled button Custom tonal button

FAB

Normal

edit edit edit edit edit

Small

edit edit edit edit edit

Large

edit edit edit edit edit

Lowered

edit edit edit edit

Extended FAB

With icon

Compose Compose Compose

Without icon

Compose Compose Compose

Icon buttons

Filled icon buttons

search favorite favorite favorite favorite favorite favorite

Filled tonal icon buttons

search favorite favorite favorite favorite favorite favorite

Outlined icon buttons

search favorite favorite favorite favorite favorite favorite favorite

Standard icon buttons

search favorite favorite favorite favorite favorite favorite

Custom icon buttons

search search search favorite favorite favorite

Segmented buttons

Single selection

Favorite Enabled Disabled Text only

Multi-selectable

Favorite Enabled Disabled Text only

Checks

$ $$ $$$ $$$$

Multi-selectable checks

$ $$ $$$ $$$$

Bottom app bar

Surface color

1k 2k 3k 4k

Primary-container color

1k 2k 3k 4k

Custom color

1k 2k 3k 4k

Card

Elevated

Elevated Card Title small text Body medium text
Action
Actionable Elevated Card Title small text Body medium text
Action
Actionable Elevated Card Title small text Body medium text
Action
Elevated Card Title small text Body medium text
Action
Actionable Elevated Card Title small text Body medium text
Action

Filled

Filled Card Title small text Body medium text
Action
Actionable Filled Card Title small text Body medium text
Action
Actionable Filled Card Title small text Body medium text
Action
Filled Card Title small text Body medium text
Action
Actionable Filled Card Title small text Body medium text
Action

Outlined

Outlined Card Title small text Body medium text
Action
Actionable Outlined Card Title small text Body medium text
Action
Outlined Card (Disabled) Body medium text
Action
Actionable Outlined Card (Disabled) Body medium text
Action

Chips

Assist chips

Default

Default Trailing Tertiary Surface Primary Custom ink Assist chip Disabled chip

Elevated

Default Tertiary Surface Primary Custom ink Assist chip Disabled chip Assist chip

Filter chips

aria-pressed (button)

Default Tertiary Surface Primary Custom color Assist chip Disabled chip

aria-checked (checkbox)

Default Tertiary Surface Primary Custom color Assist chip Disabled chip

Input chips

Suggestion chips

Default

Default Primary Tertiary Surface Primary Custom ink Disabled chip

Elevated

Default Primary Tertiary Custom ink Disabled chip

Sample