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, tonal, outlined,
elevated, text) and a
size (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.
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.
<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.
<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.
<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.
<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.
<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.
<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
for the whole axis.
<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.
<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.
<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.
<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.
<button disabled>Filled</button>
<button class="tonal" disabled>Tonal</button>
<a class="button disabled" href="#!">Link</a>