MDC

Split Button

Demo

Disable Elevation

Code
<mdc-split-button disable-elevation variant="elevated">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button variant="elevated">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Disable Focus Ring

Code
<mdc-split-button disable-focus-ring>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Disable Morph

Code
<mdc-split-button>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button disable-morph>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Disable Ripple

Code
<mdc-split-button disable-ripple>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Disabled

Code
<mdc-split-button disabled>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button disabled variant="elevated">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button disabled variant="outlined">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Expanded

Code
<mdc-split-button expanded>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button expanded size="medium"><mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon>Save</mdc-split-button>

<mdc-split-button expanded size="extra-large">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Icon

Code
<mdc-split-button><mdc-icon slot="icon" name="add"></mdc-icon>Create<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button><mdc-icon slot="icon" name="edit"></mdc-icon>Edit</mdc-split-button>

<mdc-split-button trailing-aria-label="More options"><mdc-icon slot="trailing-icon" name="more_vert"></mdc-icon>Menu</mdc-split-button>

<mdc-split-button>Send<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon><span slot="trailing-label">Later</span></mdc-split-button>

Leading Disabled

Code
<mdc-split-button leading-disabled>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button leading-disabled><mdc-icon slot="icon" name="add"></mdc-icon>Create<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Size

Code
<mdc-split-button size="extra-small">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button size="small">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button size="medium">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button size="large">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button size="extra-large">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Trailing Disabled

Code
<mdc-split-button trailing-disabled>Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button trailing-disabled variant="outlined">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

Variant

Code
<mdc-split-button variant="filled">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button variant="filled-tonal">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button variant="elevated">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>

<mdc-split-button variant="outlined">Save<mdc-icon slot="trailing-icon" name="arrow_drop_down"></mdc-icon></mdc-split-button>