Button
Buttons enable people to initiate actions, make choices, and trigger state transitions. Material 3 defines five distinct emphasis levels with fluid shape-morphing states.
Active Development Notice
This component registry is under active construction. The Button is our primary release candidate. APIs, compound variants, and token structures are currently stabilizing before the v1.0 milestone.
<Button>
Action Button
</Button>Interactive Toggle Morphing Demo
Click to observe Material 3 shape compression and tonal color shift between selected and unselected states.
Playground Controls
Variant Specifications
Material 3 defines five button variants to support distinct levels of action hierarchy.
Use for the single primary, highest-importance action on a page or flow. Only one filled button should dominate a given screen.
Provides secondary emphasis alongside filled buttons. Built with secondary container tones to separate from primary flows.
Lightly elevated container for cards and patterned surfaces where an outlined or flat button would lose visual separation.
Essential for secondary or independent actions that need boundary containment without surface fill competition.
Low-emphasis actions inside dialogs, cards, and toolbars where borders or fills would add unnecessary visual friction.
Circle shape enforces aspect ratio equality for standalone icon buttons while preserving the 48px touch target.
Size Hierarchy
Sizes range from xs (compact density) to xl (hero visual impact), maintaining proportional typography and icon bounding.