# Buttons

> Material Design 3 common buttons, icon buttons, and FABs — from the HTML.

## Anatomy

A `<button>` is a filled common button. An `<a class="button">` is the same thing for a link. Put an `<span class="material-symbols" aria-hidden="true">` icon before or after the label and wrap the label in its own `<span>` — there is no `icon-left` / `icon-right` class; the order of the two spans is the placement. An icon-only button needs an `aria-label`, because the icon is hidden from assistive technology. Add `circle` for a 40dp icon button.

Two independent axes dress it: a [style](#filled) (`filled`, `tonal`, `outlined`, `elevated`, `text`) and a [size](#sizes) (`xsmall` through `xlarge`). Any style combines with any size — that is nine classes, not twenty-five, because the size sets the geometry and the style sets the color.

Tokens follow the [M3 button spec](https://m3.material.io/components/buttons/specs). The default is the small size: 40dp tall, label `label-large`, fully round corners, a 20dp icon on an 8dp gap, and a symmetric 16dp inset. State layers are 8% hover and 10% focus or press. Disabled is `on-surface` at 38% on a 12% container.

Create Create Send

```
<button>Create</button>
<button>
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
<button>
  <span>Send</span><span class="material-symbols" aria-hidden="true">send</span>
</button>
<button class="circle" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</button>

<a class="button" href="#!">Link</a>
```

## Filled

High emphasis. This is the default — the main action on a page. Container `primary`, label `on-primary`, no elevation. It has a class of its own, `filled`, so the style axis reads as five names rather than four and a silence; writing it changes nothing.

Create Create Create Link

```
<button>Create</button>
<button class="filled">Create</button>
<button>
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
<a class="button" href="#!">Link</a>
```

## Tonal

Medium emphasis. Add `tonal`. Container `secondary-container`, label `on-secondary-container`.

Create Create

```
<button class="tonal">Create</button>
<button class="tonal">
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
```

## Outlined

Medium emphasis, no fill. Add `outlined` (or `border`). Outline is `outline`, label is `primary`.

Create Create

```
<button class="outlined">Create</button>
```

## Elevated

Medium emphasis with a shadow. Container `surface`, label `primary`, elevation 1 at rest and 2 on hover. Use sparingly so the page does not fill with shadows.

Create Create

```
<button class="elevated">Create</button>
```

## Text

Low emphasis. Add `text`. No container, label `primary`. Use these inside cards and dialogs so they do not stack shadows.

Create Create

```
<button class="text">Create</button>
```

## Icon buttons

Add `circle` for a 40dp icon button. The variant helpers still apply: default is filled, `text` is the standard (transparent) icon button, `tonal` and `outlined` match the common-button colors.

```
<button class="circle" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</button>
<button class="circle tonal" aria-label="Add">…</button>
<button class="circle outlined" aria-label="Add">…</button>
<button class="circle text" aria-label="Add">…</button>
```

## Floating

A FAB is `circle extra` or `circle large`: 56dp, 16dp corners, `primary-container`, elevation 3. `extra circle small` is the 40dp small FAB, `extra circle medium` the 80dp medium one (20dp corners, 26dp icon) and `extra circle large` the 96dp large one (28dp corners, 36dp icon). The large size needs the `extra`: `circle large` on its own is the alias for the default 56dp FAB. `extend` is the extended FAB — icon plus label at 56dp, 16dp corners, 8dp between the two. It takes the same three sizes: `extend small` is 56dp on a symmetric 16dp inset, `extend medium` 80dp (20dp corners, 28dp icon) and `extend large` 96dp (28dp corners, 36dp icon), each with the label role Material gives it. Its container colour is a role too — `secondary-container` and `tertiary-container` recolour the label and the state layers with it. See [the FAB page](/floating-action-button.html.md#extended) for the whole axis.

Create Create Create Create

```
<button class="circle extra" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</button>
<a class="button extra circle small" href="#!" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</a>
<button class="circle extra medium" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</button>
<button class="circle extra large" aria-label="Add">
  <span class="material-symbols" aria-hidden="true">add</span>
</button>
<button class="extend">
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
<button class="extend small">
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
<button class="extend medium">
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
<button class="extend large secondary-container">
  <span class="material-symbols" aria-hidden="true">add</span><span>Create</span>
</button>
```

## Sizes

Five sizes. `small` is the default at 40dp with a 20dp icon, so it needs no class. The rest are `xsmall` (32dp, 20dp icon), `medium` (56dp, 24dp, `title-medium` label), `large` (96dp, 32dp, `headline-small`) and `xlarge` (136dp, 40dp, `headline-large`). The inset and the icon gap grow with the size, and an `outlined` button's border thickens with it — 1dp up to medium, 2dp large, 3dp extra large. `extra` is the pre-1.0 name for the 56dp button and still gives you that geometry, though not `medium`'s bigger label — it never carried one. The ladder is the common button's, and `circle` is on it: a round common button takes its rung's box *and* its rung's glyph — 40dp with a 20dp icon by default, 136dp with a 40dp icon at `xlarge`. Only `circle extra` / `circle large` step off it, because those are FAB sizes with a ladder of their own. For the icon *button*'s numbers — 40dp with a 24dp icon — the component is [`.icon-button`](/icon-buttons.html.md).

Extra small Small Medium

Large

Extra large

```
<button class="xsmall">Extra small</button>
<button>Small</button>
<button class="medium">Medium</button>
<button class="large">Large</button>
<button class="xlarge">Extra large</button>
```

The two axes are written side by side — there is no per-combination class, so anything on one list goes with anything on the other.

Tonal medium Outlined extra small Text medium

```
<button class="tonal medium">Tonal medium</button>
<button class="outlined xsmall">Outlined extra small</button>
<button class="text medium">Text medium</button>
```

For a form submit, use a real `<button type="submit">` rather than an input.

Submit

```
<button type="submit">
  <span>Submit</span><span class="material-symbols" aria-hidden="true">send</span>
</button>
```

## Disabled

The `disabled` attribute, or the `disabled` class on a link. Applies to every variant.

Filled Tonal Outlined Text

```
<button disabled>Filled</button>
<button class="tonal" disabled>Tonal</button>
<a class="button disabled" href="#!">Link</a>
```