Icon Button

Icon buttons allow users to take actions and make choices with a single tap. Ideal for toolbars and compact UIs.

Basic

<me-icon-button aria-label="delete"> <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">...</svg> </me-icon-button>

Colors

<me-icon-button aria-label="...">...</me-icon-button> <me-icon-button color="primary" aria-label="...">...</me-icon-button> <me-icon-button color="secondary" aria-label="...">...</me-icon-button> <me-icon-button color="error" aria-label="...">...</me-icon-button>

Sizes

<me-icon-button size="small" aria-label="...">...</me-icon-button> <me-icon-button aria-label="...">...</me-icon-button> <me-icon-button size="large" aria-label="...">...</me-icon-button>

Disabled

<me-icon-button disabled aria-label="...">...</me-icon-button>

API

Attribute	Type	Default	Description
`color`	default \| primary \| secondary \| error \| warning \| info \| success \| inherit	default	Button color.
`size`	small \| medium \| large	medium	Button size (padding and font-size).
`disabled`	boolean	false	Disables interaction.
`edge`	start \| end	—	Negative margin for use in toolbars.
`aria-label`	string	—	Required accessible label.