The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Toolbar

Button styles can be used on <code><a></code>, <code><button></code>, or <code><input></code> elements.

Usage

The letters in button labels are displayed in uppercase.

The button component is implemented with pure CSS, so writing the HTML alone is enough for it to work.

Material Design Guidelines: Components - Button

Style

Icon button

Disabled state

Block level element
Button group
Add class .mdui-btn to <a>, <button>, or <input> elements to get the flat button style.
Adding the .mdui-btn-raised class to a flat button gives it a raised effect.
Adding the class .mdui-btn-icon to a flat button can turn it into an icon button.

Dense buttons are slightly smaller than regular buttons and are best suited to scenarios where the mouse and keyboard are the primary input methods. Simply add the class .mdui-btn-dense to a regular button.

Example

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

Dense button

Example

<div class="mdui-toolbar mdui-color-theme">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

CSS Classes

Class Name	Description
`.mdui-toolbar`	Add the <code>disabled</code> attribute to a button to disable it.
`.mdui-toolbar-spacer`	Add the <code>.mdui-btn-block</code> class to a button to make it stretch to 100% of the parent element’s width, turning it into a block-level element.

Tabs

App Bar