Material Design 3Actions

Material Button

Buttons communicate actions that users can take. Material Design 3 buttons come in five variants: Filled, Tonal, Elevated, Outlined, and Text.

Overview

Buttons are used to trigger actions. They should clearly indicate what action will occur when pressed. Material Design 3 provides five button variants with distinct visual hierarchies to help users understand the importance and context of each action.

Live Preview

Button with Icon

Button States

Filled Button States

Outlined Button States

Brand Properties

The following table shows Material Button properties with Material Design 3 defaults and brand-specific values.

Property	Type	Material Default	HoB Value	TAE Value
Height	Dimension	`40px`	`44px`	`52px`
Corner Radius	Dimension	`20px (full)`	`9999px (pill)`	`9999px (pill)`
Horizontal Padding	Dimension	`24px`	`32px`	`20px`
Vertical Padding	Dimension	`10px`	`12px`	`16px`
Icon Size	Dimension	`18px`	`18px`	`20px`
Icon Gap	Dimension	`8px`	`8px`	`8px`
Filled Background	Color	`#6750A4`	`#038012`	`#1A5129`
Filled Text Color	Color	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Filled Hover Background	Color	`#7965AF`	`#195129`	`#5F982F`
Tonal Background	Color	`#E8DEF8`	`primary + 20% opacity`	`primary + 20% opacity`
Tonal Text Color	Color	`#1D192B`	`#038012`	`#1A5129`
Outlined Border Color	Color	`#79747E`	`#038012`	`#1A5129`
Outlined Border Width	Dimension	`1px`	`1px`	`1px`
Text Button Color	Color	`#6750A4`	`#038012`	`#1A5129`
Elevated Shadow	Shadow	`Level 1 (1dp)`	`0 4px 6px rgba(0,0,0,0.1)`	`0 4px 6px rgba(0,0,0,0.1)`
Font Family	Font	`Roboto`	`Open Sans`	`Open Sans`
Font Size	Font Size	`14px`	`14px`	`20px`
Font Weight	Font Weight	`500`	`400`	`700`
Letter Spacing	Dimension	`0.1px`	`0.5px`	`0px`
Text Transform	Transform	`none`	`uppercase`	`uppercase`
Disabled Opacity	Percentage	`38%`	`50%`	`50%`

Hierarchy Guidelines

Filled

Highest emphasis

Tonal

High emphasis

Elevated

Medium emphasis

Outlined

Medium emphasis

Text

Lowest emphasis

Accessibility

Ensure minimum 44x44px touch target on mobile
Use semantic <button> element for actions
Maintain 4.5:1 color contrast ratio for text
Provide visible focus states for keyboard navigation
Use aria-disabled instead of removing from DOM
Include meaningful button text or aria-label

Do's and Don'ts

Do

Use filled buttons for primary actions
Use text buttons for less important actions
Maintain consistent button styles across the app
Use action verbs in button labels

Don't

Use multiple filled buttons side by side
Use vague labels like "Click here"
Mix button styles inconsistently
Make buttons that look like text links

Related Components

Icon Button - Buttons with only icons
FAB - Floating action buttons
Segmented Button - Multiple selection buttons
CRAFT Button Element - Base button element