filled
tonal
elevated
outlined
text
with icon
sizes
touch target
XS (32dp) and S (40dp) buttons keep the small visible pill but the tap/click hit area is 48dp tall, extending invisibly above and below — inspect the box model to see it.
toggle
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
keyboard ripple
Click near the edge with the mouse, then Tab to this button and press Space/Enter — the ripple must start from the center, not the earlier click position.
Sample usage
<!-- variants -->
<material-button variant="filled" label="Save"></material-button>
<material-button variant="tonal" label="Add to list"></material-button>
<material-button variant="elevated" label="Open"></material-button>
<material-button variant="outlined" label="Cancel"></material-button>
<material-button variant="text" label="Learn more"></material-button>
<!-- icons -->
<material-button variant="filled" icon="add" label="Create"></material-button>
<material-button variant="text" trailing-icon="arrow_forward" label="Next"></material-button>
<material-button variant="outlined" icon="settings" trailing-icon="expand_more" label="Options"></material-button>
<!-- sizes: xs | s (default) | m | l | xl -->
<material-button size="m" label="Medium"></material-button>
<material-button size="xl" label="X-Large"></material-button>
<!-- form: type="submit" by default, formAssociated -->
<form>
<material-button label="Save" type="submit"></material-button>
<material-button label="Reset" variant="text" type="reset"></material-button>
</form>
<!-- link: renders as <a href> instead of <button> -->
<material-button href="/docs" label="Same tab"></material-button>
<material-button href="https://example.com" target="_blank" label="External"></material-button>
<material-button href="/file.css" download="file.css" label="Download"></material-button>
<!-- options -->
<material-button label="Press me" shape-morph></material-button>
<material-button label="Disabled" disabled></material-button>
<material-button label="Soft-disabled" soft-disabled></material-button>
<material-button icon="check" aria-label="Confirm"></material-button>