# Install

```shell
npm i @mate-vue/dialog
```

# Import

```vue
<script setup>
import { MateDialog } from '@mate-vue/dialog';
</script>
```

# Variants

## Danger

## Small

```vue
<template>
  <MateDialog header-title="Small dialog" theme="small" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>
```

## Medium

```vue
<template>
  <MateDialog header-title="Medium dialog" theme="medium" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>
```

## Large

```vue
<template>
  <MateDialog header-title="Large dialog" theme="large" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>
```

## Footer actions

```vue
<template>
  <MateDialog header-title="Datensätze löschen?" v-model:opened="opened">
    <p>Diese Aktion kann nicht rückgängig gemacht werden.</p>
    <template #footer>
      <MateButton @click="opened = false">Abbrechen</MateButton>
      <MateButton theme="error primary" @click="opened = false">Löschen</MateButton>
    </template>
  </MateDialog>
</template>
```