Actions

Button

A focused action primitive with five levels of emphasis, semantic colors, native and link behavior, flexible content, and explicit async states.

Playground

Configure the complete public surface and copy synchronized kebab-case markup.

Properties

Label

Keep action text concise

Button label

Variant

Sets visual emphasis

Color

Uses a semantic role

Content

Default and named slots

Root behavior

Native button or Nuxt link

Native type

Form submission behavior

State

Interactive state flags

DisabledLoading

Vue

<m-button>
  Continue
</m-button>

Token map

Choose a variant and semantic color to inspect its state groups and component-to-system dependencies.

Search tokens

Primary · Filled6 tokens

md-button

MButton API

Props, slots, and events are hydrated from the generated public manifest.

MButton

Button family

src/runtime/components/ui/button

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'

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

Slots

Events

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