Skip to content
Mirror

Button

A button that can render as something else, with disabled semantics and a loading state.

View source View as Markdown

Button renders a <button>, or whatever element you point it at, and keeps the disabled and loading semantics correct either way. Use it wherever you would write <button>; if the button should stay pressed once activated, use Toggle.

App.vue
<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button :class="style">Save</Button>
    <Button :class="style" loading>Saving…</Button>
    <Button :class="style" disabled>Disabled</Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@maas/mirror/vue/Button'

const style = [
  'inline-flex h-12 items-center justify-center gap-1.5 px-[1.125rem] whitespace-nowrap',
  'rounded-component-lg border-2 border-[transparent] type-component-lg',
  'bg-primary-solid text-primary-on-solid',
  'transition-all duration-100 ease-linear',
  'outline-4 outline-transparent focus-visible:focus-ring',
  'hover:bg-primary-solid-hover active:bg-primary-solid-active',
  'data-[loading=true]:bg-disabled-solid data-[loading=true]:text-disabled-on-solid',
  'data-[disabled=true]:bg-disabled-solid data-[disabled=true]:text-disabled-on-solid',
].join(' ')
</script>

Usage guidelines

  • A button whose content is a glyph has no accessible name, so give it an aria-label.must
  • The button works out whether it renders a real <button>, so an <a> or a <div> gets the role, the tab stop and the keyboard activation without being told. Give it a real element through as, or put one in the slot under asChild.must