Version:

Install ​

shell
npm i @mate-vue/button@

Import ​

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

Variants ​

Primary ​

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

Secondary ​

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

Tertiary ​

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

Success ​

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

Error / Danger ​

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

Disabled ​

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

Icon ​

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

vue
<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 ​

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

Suffix Icon ​

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

Icon unstyled ​

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