Button

Material Design 3 button web component (filled, outlined, text, elevated, tonal).

Example

npm install @lit-material/button @lit-material/tokens

import "@lit-material/button";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

Material Design 3 button.

Property	Attribute	Type	Default	Description
`variant`	`variant`	`ButtonVariant`	`"filled"`
`type`	`type`	`ButtonType`	`"button"`
`disabled`	`disabled`	`boolean`	`false`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`""`
`form`	`form`	`string \| undefined`	none
`href`	`href`	`string`	`""`	If set, renders the button as a link (`<a>`) instead of a `<button>`.
`target`	`target`	`string`	`""`

Slot	Description
default	The button's label.
`icon`	An optional leading icon.

Part	Description
`button`	The native `<button>` or `<a>` element rendered inside the shadow root.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.

Property	Description
`--lit-material-button-height`	Button height (default `40px`).
`--lit-material-button-padding-inline`	Left and right padding (default `24px`).
`--lit-material-button-text-padding-inline`	The same for `variant="text"` (default `12px`).
`--lit-material-button-shape`	Corner radius (default `--md-sys-shape-corner-full`).
`--lit-material-button-shape-start`	Start-side corners (default `--lit-material-button-shape`).
`--lit-material-button-shape-end`	End-side corners (default `--lit-material-button-shape`).
`--lit-material-button-pressed-scale`	Scale while pressed, e.g. `0.98` (default `1`; off under reduced motion).