Buttons
Material 3 Expressive Button components, including elevated, filled, tonal, outlined, and text variants.
Button Variants
Material Design 3 provides five button types to support different emphasis levels:
Filled Button
High EmphasisThe most prominent button type. Use for the primary, most important action on a screen.
Elevated Button
Medium-High EmphasisAdds dimension to mostly flat layouts. Use for secondary actions that need separation.
Tonal Button
Medium EmphasisAn alternative middle ground between filled and outlined buttons. Good for secondary actions.
Outlined Button
Medium EmphasisFor actions that need attention but aren't the primary focus. Often paired with filled buttons.
Text Button
Low EmphasisFor the least important actions. Often used in cards, dialogs, and toolbars.
<m3-button variant="filled">Filled Button</m3-button>
<m3-button variant="elevated">Elevated Button</m3-button>
<m3-button variant="tonal">Tonal Button</m3-button>
<m3-button variant="outlined">Outlined Button</m3-button>
<m3-button variant="text">Text Button</m3-button>Button Sizes (Material 3 Expressive)
Five size options to support different layout requirements and emphasis levels.
Size Variants
<m3-button variant="filled" size="small">Small</m3-button>
<m3-button variant="filled" size="medium">Medium</m3-button>
<m3-button variant="filled" size="large">Large</m3-button>Extra Small (32px)
Compact size for dense layouts and toolbars
Small (40px) - Default
Standard size for most interfaces
Medium (48px)
Larger for increased prominence
Large (56px)
Large for high emphasis actions
Extra Large (64px)
Maximum size for hero actions
Button Shapes (Material 3 Expressive)
Round or square corners with dynamic shape morphing on press.
Round Shape (Default)
Fully rounded corners - morphs to less round when pressed
Square Shape
Minimal rounding - morphs to more round when pressed
<m3-button variant="filled" shape="round">Round</m3-button>
<m3-button variant="filled" shape="square">Square</m3-button>Shape with Variants
Interactive Demo
Press and hold to see shape morphing animation
Button Padding (Material 3 Expressive)
Choose between default (24dp) and compact (16dp) padding. Small padding recommended for new designs.
Default Padding (24dp)
Traditional spacing - deprecated for small buttons
Small Padding (16dp) - Recommended
Compact spacing for modern layouts
<m3-button variant="filled" padding="default">Default</m3-button>
<m3-button variant="filled" padding="small">Small</m3-button>Comparison
Combined Features
Combine size, shape, and padding for expressive button designs.
Hero CTA
Modern Card Action
Compact Toolbar
Form Buttons
Buttons with Icons
Add icons to buttons to improve scannability and recognition.
Filled with Icon
Elevated with Icon
Tonal with Icon
Outlined with Icon
Text with Icon
<m3-button variant="filled">
<svg slot="icon" viewBox="0 0 24 24" width="18" height="18">...</svg>
Add Item
</m3-button>Icon-Only Buttons
For compact interfaces. Always include aria-label for accessibility.
<m3-button icon-only aria-label="Add" variant="filled">
<svg slot="icon" viewBox="0 0 24 24" width="18" height="18">...</svg>
</m3-button>Loading State
Show feedback during asynchronous operations.
Try it:
Click the button to see the loading state (2 second demo)
<m3-button variant="filled" loading>Processing...</m3-button>Full Width Buttons
For forms and mobile layouts where buttons should span the container.
<m3-button variant="filled" full-width>Save Changes</m3-button>Common Patterns
Dialog Actions
Use text buttons for low-emphasis actions and filled for primary actions.
Form Actions
Primary action on the right, secondary on the left.
Card Actions
Text or tonal buttons work well in cards.
Card content goes here with some information...
♿ Accessibility Features
- Keyboard Navigation: Full support for Enter/Space activation and Tab focus
- Focus Indicators: Visible focus rings for keyboard users
- ARIA Support: Proper
aria-label,aria-busyfor loading states - Touch Targets: Minimum 48x48px tap targets (includes invisible padding)
- Screen Readers: Disabled and loading states properly announced
- Color Contrast: WCAG 2.1 Level AA compliant color combinations
- Flexible Sizing: Five size options (extra-small to extra-large) for optimal touch targets
- Shape Morphing: Dynamic visual feedback when pressed improves interaction clarity