Button

README

Demo

Components

mdc-button
mdc-toggle-button

Status

Component	Ready to use
mdc-button	Yes
mdc-toggle-button	Yes

Disable Elevation

Code

<mdc-button variant="filled" disable-elevation>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal" disable-elevation>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined" disable-elevation>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated" disable-elevation>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text" disable-elevation>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

Disable Focus Ring

Code

<mdc-button variant="filled" disable-focus-ring>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal" disable-focus-ring>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined" disable-focus-ring>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated" disable-focus-ring>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text" disable-focus-ring>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

Disable Morph

Code

<mdc-button variant="filled">
    <span>Morph</span>
</mdc-button>

<mdc-button variant="filled" disable-morph>
    <span>No morph</span>
</mdc-button>

Disable Ripple

Code

<mdc-button variant="filled" disable-ripple>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal" disable-ripple>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined" disable-ripple>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated" disable-ripple>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text" disable-ripple>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

Disabled

Code

<mdc-button variant="filled" disabled>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal" disabled>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined" disabled>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated" disabled>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text" disabled>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

Icon

Code

<mdc-button variant="filled">
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal">
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined">
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated">
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text">
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

<mdc-button variant="filled" trailing-icon>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled</span>
</mdc-button>

<mdc-button variant="filled-tonal" trailing-icon>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>filled-tonal</span>
</mdc-button>

<mdc-button variant="outlined" trailing-icon>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>outlined</span>
</mdc-button>

<mdc-button variant="elevated" trailing-icon>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text" trailing-icon>
    <mdc-icon slot="icon" name="send"></mdc-icon>
    <span>text</span>
</mdc-button>

Name

Code

<form>
    <mdc-button variant="filled" name="opt" value="a">A</mdc-button>
    <mdc-button variant="filled" name="opt" value="b">B</mdc-button>
    <button type="submit">Submit</button>
</form>

Shape

Code

<mdc-button variant="filled" shape="round">
    <span>round</span>
</mdc-button>
<mdc-button variant="filled" shape="square">
    <span>square</span>
</mdc-button>

Size

Code

<mdc-button
    variant="filled"
    size="extra-small"
>
    <span>extra-small</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

<mdc-button
    variant="filled"
    size="small"
>
    <span>small</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

<mdc-button
    variant="filled"
    size="medium"
>
    <span>medium</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

<mdc-button
    variant="filled"
    size="large"
>
    <span>large</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

<mdc-button
    variant="filled"
    size="extra-large"
>
    <span>extra-large</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-button>

Trailing Icon

Code

<mdc-button variant="filled">
    <span>Leading</span>
    <mdc-icon slot="icon" name="send"></mdc-icon>
</mdc-button>

<mdc-button variant="filled" trailing-icon>
    <span>Trailing</span>
    <mdc-icon slot="icon" name="send"></mdc-icon>
</mdc-button>

Type

Code

<form>
    <mdc-button variant="filled" type="submit">Submit</mdc-button>
    <mdc-button variant="outlined" type="reset">Reset</mdc-button>
    <mdc-button variant="text" type="button">Button</mdc-button>
</form>

Value

Code

<form>
    <mdc-button variant="filled" name="choice" value="apple">Apple</mdc-button>
    <mdc-button variant="filled" name="choice" value="banana">Banana</mdc-button>
</form>

Variant

Code

<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="elevated">
    <span>elevated</span>
</mdc-button>

<mdc-button variant="text">
    <span>text</span>
</mdc-button>

Checked

Code

<mdc-toggle-button variant="filled">
    <span>Unchecked</span>
</mdc-toggle-button>

<mdc-toggle-button variant="filled" default-checked>
    <span>Checked</span>
</mdc-toggle-button>

Required

Code

<mdc-toggle-button variant="filled" required>
    <span>Required</span>
</mdc-toggle-button>

<mdc-toggle-button variant="filled" required default-checked>
    <span>Required &amp; checked</span>
</mdc-toggle-button>

Type

Code

<mdc-toggle-button variant="filled" type="checkbox" default-checked>
    <span>Checkbox</span>
</mdc-toggle-button>

<form>
    <mdc-toggle-button variant="filled" type="radio" name="rg" value="a" default-checked>
        <span>Radio A</span>
    </mdc-toggle-button>
    <mdc-toggle-button variant="filled" type="radio" name="rg" value="b">
        <span>Radio B</span>
    </mdc-toggle-button>
</form>

Value

Code

<mdc-toggle-button variant="filled" type="checkbox" value="default-on" default-checked>
    <span>default-on</span>
</mdc-toggle-button>

<mdc-toggle-button variant="filled" type="checkbox" value="custom-value" default-checked>
    <span>custom-value</span>
</mdc-toggle-button>

Variant

Code

<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>

<mdc-toggle-button variant="elevated">
    <span>elevated</span>
</mdc-toggle-button>

<mdc-toggle-button variant="text">
    <span>text</span>
</mdc-toggle-button>