Icon Button

Icon button can only act as a button.

Import

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

Props

Variant

The variant attributes include:

• filled
• filled-tonal
• outlined
• standard (default)

<mdc-icon-button variant="filled">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="filled-tonal">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="outlined">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="outlined">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

Size

The size attributes include:

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

<mdc-icon-button  variant="filled" size="extra-small">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button  variant="filled" size="small">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button  variant="filled" size="medium">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button  variant="filled" size="large">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button  variant="filled" size="extra-large">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

Width

The width attributes include:

• narrow
• default
• wide

<mdc-icon-button variant="filled-tonal" width="narrow">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="filled-tonal" width="default">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="filled-tonal" width="wide">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

Shape

The shape attributes include:

• round (default)
• square

<mdc-icon-button variant="outlined" shape="round">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button variant="outlined" shape="square">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

Toggle

<mdc-toggle-icon-button variant="filled">
    <mdc-icon>send</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button variant="filled-tonal">
    <mdc-icon>send</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button variant="outlined">
    <mdc-icon>send</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-toggle-icon-button>

Disabled

<mdc-icon-button disabled variant="filled">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button disabled variant="filled-tonal">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button disabled variant="outlined">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button disabled variant="outlined">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

Form & Type

mdc-icon-button behaves like a native button. Its type field can have the following values:

• submit (default)
• reset
• button

<form id="my-form">
    <!-- ... -->
</form>

<mdc-icon-button form="my-form" type="reset">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>
<mdc-icon-button form="my-form">
    <mdc-icon>send</mdc-icon>
</mdc-icon-button>

The mdc-toggle-icon-button element is part of a form, and its type differs from the type of the mdc-icon-button element. The values for mdc-toggle-icon-button are as follows:

• radio
• checkbox

When a type is specified, it behaves like a native input element. Note that default-checked is used to mark the state after reset.

<mdc-toggle-icon-button name="form-field-type-checkbox" size="medium" variant="filled" type="checkbox" value="v1">
    <mdc-icon>delete</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button name="form-field-type-checkbox" size="medium" variant="filled" type="checkbox" value="v2">
    <mdc-icon>delete</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button name="form-field-type-radio" size="medium" variant="filled" type="radio" value="v3" default-checked>
    <mdc-icon>delete</mdc-icon>
</mdc-toggle-icon-button>
<mdc-toggle-icon-button name="form-field-type-radio" size="medium" variant="filled" type="radio" value="v4">
    <mdc-icon>delete</mdc-icon>
</mdc-toggle-icon-button>

Slots

Default Slot

You need to import the icon library yourself.

<mdc-icon>send</mdc-icon>
<span class="your-icon-library">send</span>

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