Buttons

Icon button

Use a familiar icon and always provide an accessible name.

Playground

Configure the component and copy synchronized Vue code.

Properties

Variant

Color

Icon

Disabled

Vue

<m-button-icon aria-label="Add item">
  <m-icon name="ic:round-add" />
</m-button-icon>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MButtonIcon · All51 tokens

md-icon-button

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

MButtonIcon API

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

MButtonIcon

Button family

src/runtime/components/ui/button/icon

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

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

tagRoot behavior: native button or Nuxt link.

'button' | 'link''button'

typeNative button type when `tag` is `button`.

'button' | 'submit' | 'reset''button'

toNuxt route destination when `tag` is `link`.

NuxtLinkProps['to']undefined

ariaLabelAccessible name required by the icon-only button.

stringundefined

Slots

Events

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