Install

npm i @mate-vue/button@

Import

<script setup>
import { MateButton } from '@mate-vue/button';
</script>

Variants

Primary

<template>
  <MateButton theme="primary" @click="e => console.log(e)">Primary</MateButton>
</template>

Secondary

<template>
  <MateButton>Secondary</MateButton>
</template>

Tertiary

<template>
  <MateButton theme="tertiary">Tertiary</MateButton>
</template>

Success

<template>
  <MateButton theme="success">Success</MateButton>
</template>

Error / Danger

<template>
  <MateButton theme="error">Error</MateButton>
</template>

Disabled

<template>
  <MateButton disabled>Disabled</MateButton>
</template>

Icon

See icon for an explanation of how to install the icon component and symbols. Alternatively use span.

<template>
  <MateButton theme="icon">
    <span theme="icon" role="img" aria-label="add aria label">add</span>
  </MateButton>
</template>

WARNING

Do not use aria labels on icon and button at the same time, as they both will be read out!. Same goes for grid cells, when they contain actions.

Prefix Icon

<template>
  <MateButton>
    <span theme="icon" role="img" slot="prefix">chevron_left</span>
    <span>Backward</span>
  </MateButton>
</template>

Suffix Icon

<template>
  <MateButton>
    <span>Forward</span>
    <span theme="icon" role="img" slot="suffix">chevron_right</span>
  </MateButton>
</template>

Icon unstyled

<template>
  <MateButton theme="icon unstyled">
    <span theme="icon" role="img">add</span>
  </MateButton>
</template>