m-button

m-button

An implementation of the MDC web material button.

Additional resources:

• Material Components Web - mdc-button
• Material Design Button

Quick Start

MarkoJS Tag: m-button

Attributes:

• unelevated
• raised
• outlined
• type
• disabled
• icon
• trailingicon
• text

Events:

• on-click

Usage

Button Type

Most attributes can simply be appended to the tag to change the look and feel of the button. A default button will appear as just text.

outlined for example will create a button with a simple outline while raised will create a raised button affect.

In addition the type attribute can be used to define the type dynamically. For example type="outlined" is the same as using the outlined attribute. Common available types are "unelevated", "raised", "outlined" or empty for a default text button. You can read more on the Material Components Web GitHub page for MDC Buttons.

Content

The button has three predefined sections for content. The leading icon, text and trailing icon.

These can be defined using the respective tag attributes:

• icon - Appears before the text.
• text - Appears to the right of the icon.
• trailingicon - Appears after the text.

Text

You can add text using the text attribute. You can also add text and any arbitrary content to the tag body.

m-button icon="save" outlined
  m-body -- Save

Icons

Icons are Material Icons and are defined using strings.

For example icon="settings" would add a gear icon to the button.

Examples

Text Button

m-button -- Text Button

Raised Button

m-button raised icon="bookmark" -- Save Post

Contained Button

m-button contained trailingicon="menu" text="menu"

Outlined Button

m-button icon="shop" outlined -- Buy Now