Button

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Import

import { Button } from '@md3-react/core';

Basic Usage

Live Editor

<Demo>
  <Button>Click me</Button>
</Demo>

Result

Loading...

Variants

MD3 defines five button variants:

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
    <Button variant="filled">Filled</Button>
    <Button variant="outlined">Outlined</Button>
    <Button variant="text">Text</Button>
    <Button variant="elevated">Elevated</Button>
    <Button variant="tonal">Tonal</Button>
  </div>
</Demo>

Result

Loading...

Filled Button

Use filled buttons for high emphasis actions. They contain a solid background color.

Live Editor

<Demo>
  <Button variant="filled">Submit</Button>
</Demo>

Result

Loading...

Outlined Button

Use outlined buttons for medium emphasis. They have a visible border and no background.

Live Editor

<Demo>
  <Button variant="outlined">Cancel</Button>
</Demo>

Result

Loading...

Text Button

Use text buttons for low emphasis actions, often used for less important actions.

Live Editor

<Demo>
  <Button variant="text">Learn more</Button>
</Demo>

Result

Loading...

Elevated Button

Elevated buttons have a shadow and are used when you need visual separation from the background.

Live Editor

<Demo>
  <Button variant="elevated">Add to cart</Button>
</Demo>

Result

Loading...

Tonal Button

Tonal buttons use a secondary container color, providing a middle ground between filled and outlined.

Live Editor

<Demo>
  <Button variant="tonal">Save draft</Button>
</Demo>

Result

Loading...

With Icon

Add an icon before the button text:

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
    <Button variant="filled" icon={<Add />}>Add item</Button>
    <Button variant="outlined" icon={<Settings />}>Settings</Button>
    <Button variant="tonal" icon={<Favorite />}>Favorite</Button>
  </div>
</Demo>

Result

Loading...

States

Disabled

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
    <Button variant="filled" disabled>Disabled Filled</Button>
    <Button variant="outlined" disabled>Disabled Outlined</Button>
    <Button variant="text" disabled>Disabled Text</Button>
  </div>
</Demo>

Result

Loading...

Full Width

Live Editor

<Demo>
  <Button fullWidth>Full Width Button</Button>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
variant	'filled' | 'outlined' | 'text' | 'elevated' | 'tonal'	'filled'	Visual style variant
icon	ReactNode	-	Icon element to display before text
disabled	boolean	false	Disables the button
fullWidth	boolean	false	Makes button take full container width
children	ReactNode	-	Button content

Plus all standard <button> HTML attributes.

Accessibility

• Buttons use semantic <button> elements
• Disabled state removes from tab order
• Focus visible styles for keyboard navigation

Design Guidelines

When to use each variant

Variant	Use case
Filled	Primary actions, CTAs
Outlined	Secondary actions
Text	Tertiary actions, navigation
Elevated	Actions needing visual prominence on complex backgrounds
Tonal	Actions that need more emphasis than text but less than filled

Spacing

• Minimum touch target: 48dp
• Horizontal padding: 24dp (16dp with icon)
• Button height: 40dp