Skip to main content
The MtButton component is a versatile button that supports multiple variants, sizes, icons, and loading states.

​
Import

import { MtButton } from '@meteroid/component-library';

​
Props

​
variant
'primary' | 'secondary' | 'tertiary' | 'critical'
default:"'secondary'"
The visual style variant of the button.
​
size
'x-small' | 'small' | 'default' | 'large'
default:"'small'"
The size of the button.
​
disabled
boolean
default:"false"
Toggles the disabled state of the button.
​
ghost
boolean
default:"false"
Applies a ghost style with transparent background and border.
​
square
boolean
default:"false"
Makes the button square-shaped, useful for icon-only buttons.
​
block
boolean
default:"false"
Makes the button full-width and centered.
​
isLoading
boolean
default:"false"
Shows a loading spinner and hides button content.
​
is
Component | string
default:"'button'"
The HTML element or Vue component to render as.
​
link
string
Deprecated: Use is="a" and href instead. URL to navigate to when clicked.

​
Slots

​
default
slot
The button label content.
​
iconFront
slot
Icon displayed before the button text. Receives size prop.
​
iconBack
slot
Icon displayed after the button text. Receives size prop.

​
Usage

​
Basic Button

<template>
  <mt-button variant="primary">
    Click me
  </mt-button>
</template>

​
Button with Icons

<template>
  <mt-button variant="primary">
    <template #iconFront="{ size }">
      <mt-icon name="regular-plus-xs" :size="size" />
    </template>
    Add Item
  </mt-button>
</template>

​
Loading State

<template>
  <mt-button variant="primary" :is-loading="isSubmitting">
    Submit
  </mt-button>
</template>

​
Button Sizes

<template>
  <div>
    <mt-button size="x-small">Extra Small</mt-button>
    <mt-button size="small">Small</mt-button>
    <mt-button size="default">Default</mt-button>
    <mt-button size="large">Large</mt-button>
  </div>
</template>

​
Button Variants

<template>
  <div>
    <mt-button variant="primary">Primary</mt-button>
    <mt-button variant="secondary">Secondary</mt-button>
    <mt-button variant="tertiary">Tertiary</mt-button>
    <mt-button variant="critical">Critical</mt-button>
  </div>
</template>

​
Accessibility

  • Uses native <button> element by default for proper keyboard navigation
  • Disabled buttons have tabindex="-1" when inside tooltips
  • Loading state is communicated through visual spinner
  • Focus visible with outline for keyboard navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us