Buttons

Extended FAB

Make a primary floating action explicit with a visible label.

Playground

Configure the component and copy synchronized Vue code.

Properties

Variant

Size

Content

Disabled

Vue

<m-button-extended-fab variant="filled" size="md">
  <template #prepend>
    <m-icon name="ic:round-add" />
  </template>
  Create
</m-button-extended-fab>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MButtonExtendedFab · All60 tokens

md-extended-fab

md-button-container-heightg($t, 'container-height')

Resolved value40rem

md-button-container-shapeg($t, 'container-shape')

System token--sys-shape-corner-full

md-fab-sm-container-sizeg($t, 'sm-container-size')

Resolved value40rem

md-fab-md-container-sizeg($t, 'md-container-size')

Resolved value56rem

md-fab-lg-container-sizeg($t, 'lg-container-size')

Resolved value96rem

md-extended-fab-sm-container-heightg($t, 'sm-container-height')

Resolved value40rem

md-extended-fab-md-container-heightg($t, 'md-container-height')

Resolved value56rem

md-extended-fab-lg-container-heightg($t, 'lg-container-height')

Resolved value96rem

md-button-container-gapg($t, 'container-gap')

Resolved value8rem

md-button-container-padding-inlineg($t, 'container-padding-inline')

Resolved value24rem

md-button-container-padding-with-icong($t, 'container-padding-with-icon')

Resolved value16rem

md-button-container-padding-icon-onlyg($t, 'container-padding-icon-only')

Resolved value8rem

md-button-container-padding-text-inlineg($t, 'container-padding-text-inline')

Resolved value12rem

md-extended-fab-md-padding-inlineg($t, 'md-padding-inline')

Resolved value16rem

md-extended-fab-md-gapg($t, 'md-gap')

Resolved value12rem

md-button-primary-filled-container-colorg($t, 'primary-filled-container-color')

System token--md-sys-color-primary

md-button-primary-filled-label-text-colorg($t, 'primary-filled-label-text-color')

System token--md-sys-color-on-primary

md-button-primary-elevated-container-colorg($t, 'primary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-primary-elevated-label-text-colorg($t, 'primary-elevated-label-text-color')

System token--md-sys-color-primary

md-button-primary-tonal-container-colorg($t, 'primary-tonal-container-color')

System token--md-sys-color-primary-container

md-button-primary-tonal-label-text-colorg($t, 'primary-tonal-label-text-color')

System token--md-sys-color-on-primary-container

md-button-primary-outlined-outline-colorg($t, 'primary-outlined-outline-color')

System token--md-sys-color-outline

md-button-primary-outlined-label-text-colorg($t, 'primary-outlined-label-text-color')

System token--md-sys-color-primary

md-button-primary-text-label-text-colorg($t, 'primary-text-label-text-color')

System token--md-sys-color-primary

md-button-secondary-filled-container-colorg($t, 'secondary-filled-container-color')

System token--md-sys-color-secondary

md-button-secondary-filled-label-text-colorg($t, 'secondary-filled-label-text-color')

System token--md-sys-color-on-secondary

md-button-secondary-elevated-container-colorg($t, 'secondary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-secondary-elevated-label-text-colorg($t, 'secondary-elevated-label-text-color')

System token--md-sys-color-secondary

md-button-secondary-tonal-container-colorg($t, 'secondary-tonal-container-color')

System token--md-sys-color-secondary-container

md-button-secondary-tonal-label-text-colorg($t, 'secondary-tonal-label-text-color')

System token--md-sys-color-on-secondary-container

md-button-secondary-outlined-outline-colorg($t, 'secondary-outlined-outline-color')

Resolved valuecolor-mix(secondary 50%, transparent)

md-button-secondary-outlined-label-text-colorg($t, 'secondary-outlined-label-text-color')

System token--md-sys-color-secondary

md-button-secondary-text-label-text-colorg($t, 'secondary-text-label-text-color')

System token--md-sys-color-secondary

md-button-tertiary-filled-container-colorg($t, 'tertiary-filled-container-color')

System token--md-sys-color-tertiary

md-button-tertiary-filled-label-text-colorg($t, 'tertiary-filled-label-text-color')

System token--md-sys-color-on-tertiary

md-button-tertiary-elevated-container-colorg($t, 'tertiary-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-tertiary-elevated-label-text-colorg($t, 'tertiary-elevated-label-text-color')

System token--md-sys-color-tertiary

md-button-tertiary-tonal-container-colorg($t, 'tertiary-tonal-container-color')

System token--md-sys-color-tertiary-container

md-button-tertiary-tonal-label-text-colorg($t, 'tertiary-tonal-label-text-color')

System token--md-sys-color-on-tertiary-container

md-button-tertiary-outlined-outline-colorg($t, 'tertiary-outlined-outline-color')

Resolved valuecolor-mix(tertiary 50%, transparent)

md-button-tertiary-outlined-label-text-colorg($t, 'tertiary-outlined-label-text-color')

System token--md-sys-color-tertiary

md-button-tertiary-text-label-text-colorg($t, 'tertiary-text-label-text-color')

System token--md-sys-color-tertiary

md-button-error-filled-container-colorg($t, 'error-filled-container-color')

System token--md-sys-color-error

md-button-error-filled-label-text-colorg($t, 'error-filled-label-text-color')

System token--md-sys-color-on-error

md-button-error-elevated-container-colorg($t, 'error-elevated-container-color')

System token--md-sys-color-surface-container-low

md-button-error-elevated-label-text-colorg($t, 'error-elevated-label-text-color')

System token--md-sys-color-error

md-button-error-tonal-container-colorg($t, 'error-tonal-container-color')

System token--md-sys-color-error-container

md-button-error-tonal-label-text-colorg($t, 'error-tonal-label-text-color')

System token--md-sys-color-on-error-container

md-button-error-outlined-outline-colorg($t, 'error-outlined-outline-color')

Resolved valuecolor-mix(error 50%, transparent)

md-button-error-outlined-label-text-colorg($t, 'error-outlined-label-text-color')

System token--md-sys-color-error

md-button-error-text-label-text-colorg($t, 'error-text-label-text-color')

System token--md-sys-color-error

md-button-{scheme}-{variant}-container-hover-colorg($t, '{scheme}-{variant}-container-hover-color')

Resolved value8% state layer

md-button-{scheme}-{variant}-container-pressed-colorg($t, '{scheme}-{variant}-container-pressed-color')

Resolved value12% state layer

md-button-{scheme}-{variant}-container-disabled-colorg($t, '{scheme}-{variant}-container-disabled-color')

Resolved value12% on-surface

md-button-{scheme}-{variant}-label-text-disabled-colorg($t, '{scheme}-{variant}-label-text-disabled-color')

Resolved value38% on-surface

MButtonExtendedFab API

Props, slots, and events are generated from the current public kit contract.

MButtonExtendedFab

Button family

src/runtime/components/ui/button/extended-fab

Props

NameTypeDefault

colorSemantic Material color role used by the component scheme.

'primary' | 'secondary' | 'tertiary' | 'error''primary'

variantMaterial surface treatment that controls the component emphasis.

'elevated' | 'filled' | 'tonal' | 'outlined' | 'text''filled'

sizeComponent size on the shared small, medium, and large scale.

'sm' | 'md' | 'lg''md'

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

Slots

Events

MButtonExtendedFab does not emit component-specific events. Native events fall through to its root element.