material-icon-button — @viewflow/material

filled

tonal

outlined

standard

sizes

square

widths

toggle

badge

soft-disabled

soft-disabled looks identical to disabled but stays in the tab order — Tab to it and note the focus ring lands on it (unlike the disabled buttons above, which skip it). Space/Enter/click do nothing.

link

Sample usage

<!-- variants: filled (default) | tonal | outlined | standard -->
<material-icon-button icon="edit" aria-label="Edit"></material-icon-button>
<material-icon-button variant="tonal" icon="favorite" aria-label="Like"></material-icon-button>

<!-- sizes: xs | s (default) | m | l | xl -->
<material-icon-button size="l" icon="add" aria-label="Add"></material-icon-button>

<!-- shapes: round (default) | square -->
<material-icon-button shape="square" icon="bolt" aria-label="Boost"></material-icon-button>

<!-- widths: default | narrow | wide -->
<material-icon-button size="m" width="wide" icon="menu" aria-label="Menu"></material-icon-button>

<!-- toggle: shape morphs round↔square on selection; selected-icon optional -->
<material-icon-button toggle icon="favorite_border" selected-icon="favorite"
                       aria-label="Favorite"></material-icon-button>

<!-- form-associated: submits name=value when toggle is selected -->
<form>
  <material-icon-button toggle name="pin" value="on" icon="push_pin"
                         aria-label="Pin"></material-icon-button>
</form>

<!-- link: renders as <a href> instead of <button> -->
<material-icon-button icon="home" href="/docs" aria-label="Home"></material-icon-button>
<material-icon-button icon="open_in_new" href="https://example.com" target="_blank"
                       aria-label="External"></material-icon-button>

<!-- soft-disabled: looks disabled, stays tab-focusable, blocks activation -->
<material-icon-button icon="block" aria-label="Soft-disabled" soft-disabled></material-icon-button>