Button

button can only act as a button.

Required

• mdc-elevation
• mdc-ripple
• mdc-focus-ring

Import

// mdc-button
import "@sandlada/mdc/build/components/button/button.js"

// mdc-toggle-button
import "@sandlada/mdc/build/components/button/toggle-button.js"

Props

Variant

The variant include:

• elevated
• filled
• filled-tonal
• outlined
• text

<mdc-button variant="elevated">
    <span>Elevated</span>
</mdc-button>
<mdc-button variant="filled">
    <span>Filled</span>
</mdc-button>
<mdc-button variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-button>
<mdc-button variant="outlined">
    <span>Outlined</span>
</mdc-button>
<mdc-button variant="text">
    <span>Text</span>
</mdc-button>


<mdc-toggle-button variant="elevated">
    <span>Elevated</span>
</mdc-toggle-button>
<mdc-toggle-button variant="filled">
    <span>Filled</span>
</mdc-toggle-button>
<mdc-toggle-button variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-toggle-button>
<mdc-toggle-button variant="outlined">
    <span>Outlined</span>
</mdc-toggle-button>

Size

The size attributes include:

• extra-small
• small
• medium
• large
• extra-large

<mdc-button size="extra-small">
    <span>Extra-Small</span>
</mdc-button>
<mdc-button size="small">
    <span>Small</span>
</mdc-button>
<mdc-button size="medium">
    <span>Medium</span>
</mdc-button>
<mdc-button size="large">
    <span>Large</span>
</mdc-button>
<mdc-button size="extra-large">
    <span>Extra-Large</span>
</mdc-button>

Trailing Icon

<mdc-button>
    <span>Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>
<mdc-button trailing-icon>
    <span>Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

Disabled

<mdc-button disabled variant="elevated">
    <span>Elevated</span>
</mdc-button>
<mdc-button disabled variant="filled">
    <span>Filled</span>
</mdc-button>
<mdc-button disabled variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-button>
<mdc-button disabled variant="outlined">
    <span>Outlined</span>
</mdc-button>
<mdc-button disabled variant="text">
    <span>Text</span>
</mdc-button>


<mdc-toggle-button disabled variant="elevated">
    <span>Elevated</span>
</mdc-toggle-button>
<mdc-toggle-button disabled variant="filled">
    <span>Filled</span>
</mdc-toggle-button>
<mdc-toggle-button disabled variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-toggle-button>
<mdc-toggle-button disabled variant="outlined">
    <span>Outlined</span>
</mdc-toggle-button>

Disable Morph

<mdc-button disable-morph variant="elevated">
    <span>Elevated</span>
</mdc-button>
<mdc-button disable-morph variant="filled">
    <span>Filled</span>
</mdc-button>
<mdc-button disable-morph variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-button>
<mdc-button disable-morph variant="outlined">
    <span>Outlined</span>
</mdc-button>
<mdc-button disable-morph variant="text">
    <span>Text</span>
</mdc-button>


<mdc-toggle-button disable-morph variant="elevated">
    <span>Elevated</span>
</mdc-toggle-button>
<mdc-toggle-button disable-morph variant="filled">
    <span>Filled</span>
</mdc-toggle-button>
<mdc-toggle-button disable-morph variant="filled-tonal">
    <span>Filled-Tonal</span>
</mdc-toggle-button>
<mdc-toggle-button disable-morph variant="outlined">
    <span>Outlined</span>
</mdc-toggle-button>

Slots

Default Slot

Please make sure that the element of the default slot is wrapped by HTML tags:

<span>Label</span>

<mdc-button>
    <span>Label</span>
</mdc-button>

Icon

You need to import the icon library yourself.

<mdc-icon>send</mdc-icon>

<mdc-button>
    <span>Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>