Button

Buttons allow users to take actions and make choices with a single tap.

Variants

Contained

Outlined

Text

<me-button variant="contained">Contained</me-button> <me-button variant="outlined">Outlined</me-button> <me-button>Text</me-button>

Primary

Secondary

Error

Warning

Info

Success

<me-button variant="contained" color="secondary">Secondary</me-button> <me-button variant="contained" color="error">Error</me-button>

Small

Medium

Large

<me-button variant="contained" size="small">Small</me-button> <me-button variant="contained" size="large">Large</me-button>

Add Item

Send

<me-button variant="contained"> <me-icon slot="start-icon"><svg ...>...</svg></me-icon> Add Item </me-button>

Contained

Outlined

Text

Link Button

<me-button variant="contained" href="/getting-started.html">Link Button</me-button>

Attribute	Type	Default	Description
`variant`	text \| contained \| outlined	text	The button style variant.
`color`	primary \| secondary \| error \| warning \| info \| success \| inherit	primary	The color palette to use.
`size`	small \| medium \| large	medium	The button size.
`disabled`	boolean	false	Disables the button.
`href`	string	—	Renders as an `<a>` tag with this href.
`target`	string	—	Target for the link (when href is set).

Slot	Description
(default)	Button label text.
`start-icon`	Icon rendered before the label.
`end-icon`	Icon rendered after the label.