Version:

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