# 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](../icon/vue.md) 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>
```

## Suffix Icon

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

## Icon unstyled

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