Button

Source

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-button variant="primary">Button</mt-button>
</template>

Usage

Button triggers a clear user action such as saving, creating, confirming, or moving to the next step. Use the variant to communicate action hierarchy and intent, and the size to fit the surrounding layout without changing what the action means.

import { MtButton } from "@shopware-ag/meteor-component-library";

Examples

Variants

Each variant signals a different level of emphasis and intent.

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <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>
</template>

Sizes

Match the button size to the surrounding layout without changing the meaning of the action.

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

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

With icon

Add an icon in the front or back slot to reinforce the action.

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
import MtIcon from "@shopware-ag/meteor-component-library/MtIcon";
</script>

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

Icon only

Use square and an aria-label for a compact, icon-only control.

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
import MtIcon from "@shopware-ag/meteor-component-library/MtIcon";
</script>

<template>
  <mt-button variant="secondary" :square="true" aria-label="Add item">
    <template #iconFront="{ size }">
      <mt-icon name="regular-plus-xs" :size="size" />
    </template>
  </mt-button>
</template>

States

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
</script>

<template>
  <mt-button>Default</mt-button>
  <mt-button :disabled="true">Disabled</mt-button>
  <mt-button :is-loading="true">Loading</mt-button>
</template>

API reference

Props

Prop	Type	Default
`is`	`string \| Component`	`"button"`
`disabled`	`boolean`
`variant`	`"critical" \| "action" \| "primary" \| "secondary" \| "tertiary"`	`"secondary"`
`ghost`	`boolean`
`size`	`"default" \| "small" \| "x-small" \| "large"`	`"small"`
`square`	`boolean`
`block`	`boolean`
`link`	`string`	`undefined`
`is-loading`	`boolean`

Slots

Slot	Bindings
`default`	`any`
`iconFront`	`any`
`iconBack`	`any`

Best practices

Keep button labels short, specific, and action-oriented.
Use primary for the main action in a local context.
Use secondary or tertiary for supporting actions.
Use critical only for destructive or high-risk actions.
Use square when you render an icon-only button so the control stays visually balanced.

Don't

Do not use multiple primary buttons in the same local action group.
Do not use vague labels such as Submit or Continue when a clearer verb would help.
Do not rely on color alone to explain what a button will do.
Do not use Button for purely navigational inline text links.

Behavior

Button supports visual hierarchy through variants, but the label still carries the main meaning of the action.
Loading and disabled states should be used to prevent duplicate actions or indicate temporary unavailability.
The icon slots are optional enhancements. For icon-only buttons, use square and provide an accessible name.

Accessibility

Button text should clearly describe the action without depending on surrounding context alone.
If you use only an icon visually, ensure the button still has an accessible name.
Icon-only buttons are valid, but they should use the square prop and a clear accessible label such as aria-label.
Disabled and loading buttons should be used intentionally so people understand why the action is unavailable.

Link: when the user is moving to another page, route, or destination.

Edit this pageorReport an issue

Banner

A persistent, inline message that stays visible in the page layout.

Card

A bordered surface that groups related content, metadata, and local actions into one section.