Icon Button

Icon button can only act as a button.

Import

import "@sandlada/mdc/build/components/icon-button/filled-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/filled-tonal-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/outlined-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/standard-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/toggle-filled-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/toggle-filled-tonal-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/toggle-outlined-icon-button.js"
import "@sandlada/mdc/build/components/icon-button/toggle-standard-icon-button.js"

Appearance

The appearance attributes include:

• filled
• filled-tonal
• outlined
• standard

<mdc-filled-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-filled-icon-button>
<mdc-filled-tonal-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-filled-tonal-icon-button>
<mdc-outlined-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-outlined-icon-button>
<mdc-standard-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-standard-icon-button>

Props

Size

The size attributes include:

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

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

Width

The width attributes include:

• narrow
• default
• wide

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

Shape

The shape attributes include:

• round
• square

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

Toggle

<mdc-toggle-filled-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-toggle-filled-icon-button>
<mdc-toggle-filled-tonal-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-toggle-filled-tonal-icon-button>
<mdc-toggle-outlined-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-toggle-outlined-icon-button>
<mdc-toggle-standard-icon-button>
    <mdc-icon>send</mdc-icon>
</mdc-toggle-standard-icon-button>

Disabled

    <mdc-toggle-filled-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-filled-icon-button>
    <mdc-toggle-filled-tonal-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-filled-tonal-icon-button>
    <mdc-toggle-outlined-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-outlined-icon-button>
    <mdc-toggle-standard-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-standard-icon-button>
    <mdc-toggle-filled-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-filled-icon-button>
    <mdc-toggle-filled-tonal-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-filled-tonal-icon-button>
    <mdc-toggle-outlined-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-outlined-icon-button>
    <mdc-toggle-standard-icon-button disabled>
        <mdc-icon>send</mdc-icon>
    </mdc-toggle-standard-icon-button>