Alert Dialog — React

---
import AlertDialog from '../components/astro/AlertDialog.astro';
---

<AlertDialog id="alert-demo" title="Delete item?" description="This action cannot be undone.">
  <button type="button" slot="actions" class="btn" data-alert-dialog-close>Cancel</button>
  <button type="button" slot="actions" class="btn btn-error" data-alert-dialog-close>Delete</button>
</AlertDialog>
<button type="button" class="btn" onclick="window.openAlertDialog_alert_demo()">Open</button>

<!-- Use .alert-dialog-root so overlay stacks behind the dialog. openAlertDialog_<id>(), closeAlertDialog_<id>(). -->
<div class="alert-dialog-root">
  <div class="alert-dialog__overlay" data-alert-dialog-overlay id="alert-demo-overlay" aria-hidden="true"></div>
  <div class="alert-dialog" id="alert-demo" role="alertdialog" aria-modal="true" aria-labelledby="alert-demo-title" aria-describedby="alert-demo-desc" data-alert-dialog aria-hidden="true" hidden>
    <div class="alert-dialog__content">
      <h2 id="alert-demo-title" class="alert-dialog__title">Delete item?</h2>
      <p id="alert-demo-desc" class="alert-dialog__description">This action cannot be undone.</p>
      <div class="alert-dialog__actions">
        <button type="button" class="btn" data-alert-dialog-close>Cancel</button>
        <button type="button" class="btn btn-error" data-alert-dialog-close>Delete</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn" onclick="openAlertDialog_alert_demo()">Open</button>

<script>
  import { AlertDialog, Button } from '$lib/rizzo';
  let open = $state(false);
</script>

<Button variant="error" onclick={() => (open = true)}>Delete</Button>
<AlertDialog bind:open title="Delete item?" description="This action cannot be undone.">
  {#snippet actions()}
    <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
    <Button variant="error" onclick={() => (open = false)}>Delete</Button>
  {/snippet}
</AlertDialog>

<script setup>
import { ref } from 'vue';
import AlertDialog from '@/components/rizzo/AlertDialog.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button variant="error" @click="open = true">Delete</Button>
  <AlertDialog
    v-model:open="open"
    title="Delete item?"
    description="This action cannot be undone."
  >
    <template #actions>
      <Button variant="outline" @click="open = false">Cancel</Button>
      <Button variant="error" @click="open = false">Delete</Button>
    </template>
  </AlertDialog>
</template>

import { useState } from 'react';
import { AlertDialog, Button } from './components/react';

const [open, setOpen] = useState(false);
<Button variant="error" onClick={() => setOpen(true)}>Delete</Button>
<AlertDialog open={open} onOpenChange={setOpen} title="Delete item?" description="This action cannot be undone."
  actions={<><Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button><Button variant="error" onClick={() => setOpen(false)}>Delete</Button></>}
/>