Icon Button

Material Design 3 icon button web component (standard + toggle).

Example

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

import "@lit-material/icon-button";

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

Material Design 3 icon button.

Property	Attribute	Type	Default	Description
`variant`	`variant`	`IconButtonVariant`	`"standard"`
`toggle`	`toggle`	`boolean`	`false`
`selected`	`selected`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`type`	`type`	`IconButtonType`	`"button"`
`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`	`""`
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control; icon buttons have no visible label so this is required.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Event	Description
`change`

Slot	Description
`icon`	The icon shown when the button is off (or always, when not a toggle).
`selected-icon`	The icon shown when a toggle button is selected.

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.