ComponentsActions

Icon button and toggle icon button

An icon button is a compact action for toolbars, rows and cards; a toggle icon button switches between two states such as favourite or muted. Choose them when the icon is unambiguous, and always give them an accessible name.

MudIconButton
MudToggleIconButton
MudBlazor reference ↗
Page source ↗

Accessible names

An icon is not a label. Every icon-only button carries an aria-label, and a tooltip shows the same words to sighted mouse users.

The Cartographer's Daughter

Paperback · 3 in stock

Hover or focus an icon to read its name.

Every variant and color

All 36 combinations of Variant and Color. Text is the default and the quietest; filled and outlined icon buttons draw a container around the glyph.

MudIconButton: Variant × Color
Variant ↓ · Color →	Default	Primary	Secondary	Tertiary	Info	Success	Warning	Error	Dark	Transparent	Inherit	Surface
Text
Filled
Outlined

Sizes by variant

Small, medium and large for each variant. Size changes both the icon and its touch target.

MudIconButton: Size × Variant
Size ↓ · Variant →	Text	Filled	Outlined
Small
Medium
Large

Edge alignment

Edge applies a negative margin so the glyph, not its padding, lines up with the content edge of a bar or card.

Edge.False (default)

Northgate Observatory

Tonight: clear skies after 22:00, seeing 3/5.

Edge.Start and Edge.End

Northgate Observatory

Tonight: clear skies after 22:00, seeing 3/5.

Toggle icon buttons

MudToggleIconButton swaps icon, color, variant or size when Toggled changes. Keep the label in step with the state and expose it with aria-pressed.

Episode 14: Reading the night sky

Observatory podcast · 38 min

In favourites · Sound on · Streaming only

Toggled states by variant

The same toggle with ToggledVariant, untoggled and toggled side by side, so the change of emphasis is easy to compare.

MudToggleIconButton: Variant × state (click any button to flip it)
Variant ↓ · State →	Untoggled	Toggled	Toggled, ToggledSize Large
Text
Filled
Outlined

States, links and custom content

Disabled, rendered as a link, without ripple or shadow, with custom content instead of an icon, and busy while work runs.

Disabled

Href (a link)

No shadow or ripple

Custom content

Busy: press to sync

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

Icon

Variant

Color

Size

Edge

Disabled

Drop shadow

<MudIconButton
    Icon="@Icons.Material.Outlined.AddShoppingCart"
    aria-label="Add to basket"
    Variant="Variant.Outlined"
    Color="Color.Primary" />