Component Showcase

See how your theme changes affect different Material components:

Buttons & System TokensLeft: Button Preview | Right: System Token Information

Filled Button Tokens

Container Color:
--mdc-filled-button-container-color (primary)
Label Color:
--mdc-filled-button-label-text-color (on-primary)
Typography:label-large (14px, 500 weight)
Shape:--mdc-filled-button-container-shape (full)

Outlined Button Tokens

Outline Color:
--mdc-outlined-button-outline-color (outline)
Label Color:
--mdc-outlined-button-label-text-color (primary)
Outline Width:--mdc-outlined-button-outline-width (1px)
Typography:label-large (14px, 500 weight)

Text Button Tokens

Label Color:
--mdc-text-button-label-text-color (primary)
State Layer:
--mdc-text-button-state-layer-color (primary)
Typography:label-large (14px, 500 weight)
Padding:--mdc-text-button-horizontal-padding (12px)

Tonal Button Tokens

Container Color:
--mdc-tonal-button-container-color (secondary-container)
Label Color:
--mdc-tonal-button-label-text-color (on-secondary-container)
Typography:label-large (14px, 500 weight)
Shape:--mdc-tonal-button-container-shape (full)

Elevated Button Tokens

Container Color:
--mdc-protected-button-container-color (surface)
Label Color:
--mdc-protected-button-label-text-color (primary)
Elevation:--mdc-protected-button-container-elevation (level1)
Typography:label-large (14px, 500 weight)

Icon Button Tokens

Icon Spacing:--mdc-filled-button-icon-spacing (8px)
Icon Offset:--mdc-filled-button-icon-offset (-8px)
Icon Size:18px (Material Icons)
Icon Color:
Inherits from label text color

Button States

State Layer Tokens

Hover Opacity:--mdc-filled-button-hover-state-layer-opacity (8%)
Focus Opacity:--mdc-filled-button-focus-state-layer-opacity (12%)
Pressed Opacity:--mdc-filled-button-pressed-state-layer-opacity (12%)
Disabled Container:on-surface (12% opacity)
Form Controls
Progress & Feedback
Navigation & Layout

Tab 1 Content

This is the content of the first tab.

Home
Navigate to home page
Settings
Configure application settings
Notifications
View recent notifications
Chips & Tags
Typography

Display Large

Display Medium

Display Small

Headline Large

Headline Medium
Headline Small

Title Large

Title Medium

Title Small

Body Large - This is body text in the large size.

Body Medium - This is body text in the medium size.

Body Small - This is body text in the small size.

Label Large

Label Medium

Label Small