Actions

Button

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

One action, clear intent

Use m-button when a person needs to trigger an immediate action or follow a deliberate navigation link.

Five visual variantsFilled, elevated, tonal, outlined, and text cover the supported emphasis levels.
Four semantic colorsPrimary, secondary, tertiary, and error remain connected to the active theme.
Flexible contentUse a label, leading icon, trailing icon, or the complete icon-only mode.
Native and link semanticsRender a button, submit/reset control, or Nuxt link from the same visual primitive.
Disabled and loadingExplicit states prevent repeated interaction and communicate availability.
Short sentence-case labelsDescribe the result with a direct verb or concise verb phrase.

The variant changes emphasis, not the meaning of the action.

12345

1 Filled button 2 Elevated button 3 Tonal button 4 Outlined button 5 Text button

Pick the least prominent variant that still makes the action easy to discover.

The same state, slot, color, and root-element API applies across all five variants.

Each family member has a separate interaction contract and its own documentation page.

An icon-only control with an explicit accessible name.

A floating button for the most important screen-level action.

A floating action combining an icon and a descriptive label.

A connected single- or multi-select action group.

A primary action paired with a menu of related alternatives.