# Install

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

# Import

```tsx
import { MateDialog } from '@mate-react/dialog';
import { MateButton } from '@mate-react/button';
```

# Variants

## Small

```tsx
<MateDialog headerTitle="Small dialog" theme="small" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Content</p>
</MateDialog>
```

## Medium

```tsx
<MateDialog headerTitle="Medium dialog" theme="medium" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Content</p>
</MateDialog>
```

## Large

```tsx
<MateDialog headerTitle="Large dialog" theme="large" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Content</p>
</MateDialog>
```

## Footer actions

```tsx
<MateDialog headerTitle="Datensätze löschen?" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Diese Aktion kann nicht rückgängig gemacht werden.</p>
  <div slot="footer">
    <MateButton onClick={() => setOpened(false)}>Abbrechen</MateButton>
    <MateButton theme="error primary" onClick={() => setOpened(false)}>Löschen</MateButton>
  </div>
</MateDialog>