Actions

Button

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

Anatomy

Every callout is measured from the live button below, so the lines point at the real elements.

1
Container
The button element itself: shape, elevation and the target size the user actually hits.
2
State layer
Hover, focus and pressed feedback painted on the container — the kit has no separate state-layer element.
3
Label
The action text. It carries the accessible name unless the button is icon-only.
4
Optional icon
A leading or trailing glyph. It is decorative: an icon-only button still needs an aria-label.

Variants

Choose a surface treatment from the action's relative importance in its current region.

01 · High

Filled

The strongest standard button treatment for an important action that completes or advances a flow.

Use when: A region has one clear primary action such as Save, Confirm, or Continue.
Avoid when: Several actions have equal importance or the surrounding surface is already visually dominant.

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

02 · High on complex surfaces

Elevated

Adds separation from a visually busy or layered background while keeping semantic color on the label.

Use when: The button needs separation from imagery, a scrim, or another prominent surface.
Avoid when: A filled button already provides enough contrast or elevation would add unnecessary visual noise.

<m-button variant="elevated">Open details</m-button>

03 · Medium-high

Tonal

A contained secondary action with more presence than an outline and less dominance than filled.

Use when: A supporting step still needs a clear container, for example Next in onboarding.
Avoid when: The action is the final primary outcome or should remain intentionally quiet.

<m-button variant="tonal">Next</m-button>

04 · Medium

Outlined

Keeps a visible boundary without a filled container and pairs naturally with a primary action.

Use when: The action is important but secondary, such as Save draft beside Publish.
Avoid when: The background is visually complex or nearby chips make the control ambiguous.

<m-button variant="outlined">Save draft</m-button>

05 · Low

Text

The quietest action treatment, with a container becoming visible only through interaction states.

Use when: Presenting low-priority actions in cards, dialogs, snackbars, or dense toolbars.
Avoid when: The action must be discovered immediately or sits on a visually prominent background.

<m-button variant="text">Cancel</m-button>

Semantic colors

Color communicates role and consequence; it is never a free-form visual override. Switch the role and variant to see how the scheme stays connected to the theme.

Primary and secondary
Primary carries the key action; secondary supports an alternative without competing for attention.
Tertiary and error
Tertiary creates purposeful contrast. Error is reserved for destructive or failure-related actions.

Properties

Color

Semantic role

Variant

Surface treatment

Labels and icons

Slots let the same component cover text, mixed content, and icon-only actions. Pick a content preset to see the matching markup.

Label first
A visible label is the clearest default and becomes the control's accessible name.
Icon-only needs a name
Omit the default slot and supply prepend content together with an explicit aria-label.

Properties

Content

Default and named slots

Variant

Surface treatment

Button and link behavior

Select the root behavior from intent, then keep native platform semantics intact.

Nuxt link

type=button

The safe default for commands that must not submit a surrounding form.

submit and reset

Use native form behavior only when the button belongs to that form workflow.

tag=link

Use a Nuxt link for navigation so routing, opening behavior, and assistive technology remain correct.

to

Provide a Nuxt route destination when tag is link; it is ignored by the native button root.

Interaction states

Every variant resolves a complete M3 state scheme from static SCSS tokens.

Pointer

Hover

A subtle state layer confirms that the action is interactive.

Pointer

Pressed

The active state acknowledges the current pointer or touch activation.

Keyboard

Focus-visible

A visible outline appears for keyboard focus without replacing native semantics.

Unavailable

Disabled

Prevents interaction and reduces emphasis while preserving the label for context.

Async

Loading

Shows progress, exposes aria-busy, and blocks repeated activation.

Default

Initial

Uses the selected variant and semantic color without an interaction overlay.

In context

Real compositions built from kit components — the button doing its job inside a believable UI.

Dialog actions

A quiet text Cancel beside a filled confirm keeps one clear primary action.

Vue

<m-dialog v-model="open" title="Publish changes?">
  This makes the current draft visible to everyone with access.
  <template #actions>
    <m-button variant="text" @click="open = false">Cancel</m-button>
    <m-button @click="open = false">Publish</m-button>
  </template>
</m-dialog>

Form submit + loading

The submit flips to loading, blocking duplicate activation until the request resolves.

Vue

<form @submit.prevent="submit">
  <m-text-field v-model="email" variant="outlined" label="Work email" />
  <m-button type="submit" :loading="loading" :disabled="!email">Send invite</m-button>
</form>

Destructive confirm

The error role plus a confirmation step protects an action that cannot be undone.

Vue

<m-button color="error" variant="tonal" @click="open = true">
  <template #prepend><m-icon name="ic:round-delete" /></template>
  Delete account
</m-button>
<m-dialog v-model="open" title="Delete account?">
  <template #actions>
    <m-button variant="text" @click="open = false">Keep account</m-button>
    <m-button color="error" @click="open = false">Delete</m-button>
  </template>
</m-dialog>

Unlimited projects, shared components, and priority support for growing teams.

Card call-to-action

Tonal and text actions sit calmly on an elevated card surface.

Vue

<m-card variant="filled" title="Team plan" subtitle="$12 / user">
  Unlimited projects, shared components, and priority support.
  <template #actions>
    <m-button variant="text">Compare plans</m-button>
    <m-button variant="tonal">Start trial</m-button>
  </template>
</m-card>

Toolbar actions

Icon-only controls and a primary share one dense bar without losing hierarchy.

Vue

<m-button variant="text" aria-label="Bold">
  <template #prepend><m-icon name="ic:round-format-bold" /></template>
</m-button>
<m-button variant="text">Discard</m-button>
<m-button>Save</m-button>

Consent banner

Outlined Manage beside a filled Accept gives a clear default without hiding the choice.

Container

State layer

Label

Optional icon

Filled

Elevated

Tonal

Outlined

Text

Primary and secondary

Tertiary and error

Properties

Label first

Icon-only needs a name

Properties

type=button

submit and reset

tag=link

to

Hover

Pressed

Focus-visible

Disabled

Loading

Initial

Dialog actions

Form submit + loading

Destructive confirm

Card call-to-action

Toolbar actions

Consent banner