Button

Buttons are interactive components that enable users to execute actions such as sending emails, sharing documents, or expressing preferences.

Usage

Import the component:

import 'mdui/components/button.js';

Import the TypeScript type:

import type { Button } from 'mdui/components/button.js';

Example:

Button

<mdui-button>Button</mdui-button>

Use the icon and end-icon attributes to add Material Icons to the left and right sides of the button, respectively. Alternatively, use the icon and end-icon slots to add custom elements to the button's sides.

Icon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Code

Link

Use the href attribute to transform the button into a link. The download, target, and rel attributes are available for link-related functionality.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

Code

Disabled and Loading States

Use the disabled attribute to disable the button. The loading attribute displays a loading state.

Disabled

Loading & Disabled

<mdui-button disabled>Disabled</mdui-button>
<mdui-button loading>Loading</mdui-button>
<mdui-button loading disabled>Loading & Disabled</mdui-button>

Code

API

Properties

Attribute	Property	Type	Default
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
Defines the button style. Possible values: `elevated`: A shadowed button for visual distinction. `filled`: Used for final actions like 'Save' or 'Confirm'. `tonal`: A mix between `filled` and `outlined`, suitable for medium to high-priority actions. `outlined`: A bordered button for medium-priority and secondary actions. `text`: A text button for low-priority actions.
`full-width`	`fullWidth`	`boolean`	`false`
If set, the button will fill the width of its parent element.
`icon`	`icon`	`string`	-
Specifies the Material Icons name on the left. Alternatively, use `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Specifies the Material Icons name on the right. Alternatively, use `slot="end-icon"`.
`href`	`href`	`string`	-
The URL for the hyperlink. If provided, the component is rendered as an `<a>` element and can use link-related attributes.
`download`	`download`	`string`	-
Instructs the browser to download the linked URL. Note: This is only available when `href` is specified.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Defines where to open the linked URL. Possible values: `_blank`: Opens in a new tab or window. `_parent`: Opens in the parent browsing context or `_self` if no parent. `_self`: Opens in the current browsing context. (Default). `_top`: Opens in the topmost browsing context or `_self` if no ancestors. Note: This is only available when `href` is specified.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Specifies the relationship of the linked URL as space-separated link types. Possible values: `alternate`: Alternate versions of the current document. `author`: The author of the current document or article. `bookmark`: The permalink for the nearest ancestor section. `external`: The referenced document is not part of the same site as the current document. `help`: A link to context-sensitive help. `license`: Indicates that the main content of the current document is covered by the copyright license described by the referenced document. `me`: Indicates that the current document represents the person who owns the linked content. `next`: Indicates that the current document is part of a series and the next document in the series is the referenced document. `nofollow`: Indicates that the current document's original author or publisher does not endorse the referenced document. `noreferrer`: No `Referer` header will be included. Also has the same effect as `noopener`. `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). `prev`: Indicates that the current document is part of a series and the previous document in the series is the referenced document. `search`: Links to a resource that can be used to search through the current document and its related pages. `tag`: Gives a tag (identified by the given address) that applies to the current document. Note: This is only available when `href` is specified.
`autofocus`	`autofocus`	`boolean`	`false`
Specifies that the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Defines the order in which the element receives focus when navigating with the Tab key.
`disabled`	`disabled`	`boolean`	`false`
Disables the element.
`loading`	`loading`	`boolean`	`false`
Indicates that the element is in a loading state.
`name`	`name`	`string`	`''`
The button's name, which is submitted with form data. Note: This is only available when `href` is not specified.
`value`	`value`	`string`	`''`
The button's value, which is submitted with form data. Note: This is only available when `href` is not specified.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Defines the button's default behavior. The default is `button`. Possible values: `submit`: Submits the form data to the server. `reset`: Resets all the controls to their initial values. `button`: No default behavior, does nothing when pressed by default. Note: This is only available when `href` is not specified.
`form`	`form`	`string`	-
Associates the button with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the button is associated with its parent `<form>`, if any. This attribute allows button elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`. Note: Only available when `href` is not specified.
`formaction`	`formAction`	`string`	-
Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner. Note: Only available when `href` is not specified and `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Specifies the form data encoding method. Possible values: `application/x-www-form-urlencoded`: Default if the attribute is not used. `multipart/form-data`: Used for `<input>` elements with `type` set to `file`. `text/plain`: For debugging, not for real form submission. Overrides the `enctype` attribute of the button's form owner. Note: Only available when `href` is not specified and `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Specifies the HTTP method for form submission. Possible values: `post`: Form data included in HTTP request body. `get`: Form data appended to `action` URL. Overrides the `method` attribute of the button's form owner. Note: Only available when `href` is not specified and `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner. Note: Only available when `href` is not specified and `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Specifies where to display the form submission response. Possible values: `_self`: Current browsing context. (Default). `_blank`: New tab or window. `_parent`: Parent browsing context or `_self` if no parent. `_top`: Topmost browsing context or `_self` if no ancestors. Overrides the `target` attribute of the button's form owner. Note: Only available when `href` is not specified and `type="submit"`.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
The element's validation message. This is empty if the element meets its constraints.

Methods

Name	Parameters	Returns
`click`		`void`
Simulates a mouse click on the element.
`focus`	`options: FocusOptions` (Optional)	`void`
Sets focus on the element. An optional parameter can be an object with a `preventScroll` property. If `preventScroll` is set to `true`, the page will not scroll to bring the focused element into view.
`blur`		`void`
Removes focus from the element.
`checkValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event and returns `false`. If it's valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If it's valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the text is non-empty, it indicates that the field is invalid.

Events

Name
`focus`
Emitted when the button gains focus.
`blur`
Emitted when the button loses focus.
`invalid`
Emitted when the form control's validity is checked and it doesn't meet the constraints.

Slots

Name
(default)
Button text.
`icon`
Element on the left side of the button.
`end-icon`
Element on the right side of the button.

CSS Parts

Name
`button`
Internal `<button>` or `<a>` element.
`label`
Button text.
`icon`
Icon on the left side of the button.
`end-icon`
Icon on the right side of the button.
`loading`
The `<mdui-circular-progress>` element for the loading state.

CSS Custom Properties

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

BottomAppBar

Up Next

ButtonIcon

Button

Usage

Examples

Variant

Full Width

Icons

Link

Disabled and Loading States

API

Properties

Methods

Events

Slots

CSS Parts

CSS Custom Properties