Vuance UI Kit

Actions

Button

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

Use the correct semantic root

The component preserves native semantics when tag and type match the action's intent.

  • Commands are buttons

    Use the default native button root for operations that change application state or the current surface.

  • Destinations are links

    Use tag=link and to for navigation so link behavior is available to browsers and assistive technology.

  • Declare form intent

    Use submit or reset deliberately; keep type=button for unrelated commands inside a form.

  • Do not emulate either role

    Avoid click handlers on generic elements when m-button can provide the correct behavior directly.

Keyboard and focus

Every action must remain discoverable and operable without a pointer.

  • Enter and Space

    Native buttons activate with Enter and Space; links follow native link keyboard behavior.

  • Visible focus

    The focus-visible outline must remain visible against every variant and surrounding surface.

  • Logical order

    DOM order should match visual order so keyboard navigation follows the reading sequence.

  • No focus traps

    Loading and disabled controls must not strand focus or hide the next available action.

Names, status, and target size

A visible control still needs a complete assistive-technology contract. Tab through the controls to hear what a screen reader announces.

Button docs
A screen reader announces

  • Accessible name

    Visible labels name text buttons. Icon-only content requires an aria-label describing the action.

  • Loading status

    Loading exposes aria-busy and prevents repeated activation; communicate completion in nearby live content when needed.

  • Disabled links

    A disabled link exposes aria-disabled and leaves the tab order until it can be activated again.

  • Target and spacing

    Preserve a comfortable activation area and enough separation from adjacent actions, especially on touch screens.

Vue
<m-button aria-label="Create document">
  <template #prepend>
    <m-icon name="ic:round-add" />
  </template>
</m-button>

<m-button :loading="saving">Save document</m-button>