Alert dialog

Native <dialog> that requires an explicit answer. Escape and light dismiss are disabled.

Delete this workspace?

All projects go with it. This needs an answer.

Kill

Pull a sheet from the run. The question needs an answer.

Delete this sheet?

The plate goes with it.

Install

npx @noordvc/raster-cli add alert-dialog

Markup

<dialog class="rs-dialog" open><span class="rs-dialog-title">Delete this workspace?</span><p class="rs-dialog-body">All projects go with it.</p><div class="rs-dialog-actions"><button class="rs-btn-ghost rs-btn-sm">Cancel</button><button class="rs-btn-primary rs-btn-sm">Delete</button></div></dialog>

React

import { AlertDialog, AlertDialogActions, AlertDialogBody, AlertDialogTitle } from "@/components/raster/alert-dialog";

<AlertDialog open={open} onClose={() => setOpen(false)}>
  <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
  <AlertDialogBody>All projects go with it.</AlertDialogBody>
  <AlertDialogActions>
    <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>Keep it</Button>
    <Button size="sm" onClick={remove}>Delete</Button>
  </AlertDialogActions>
</AlertDialog>

Classes

.rs-dialog.rs-dialog-title.rs-dialog-body.rs-dialog-actions

Depends on

/dialog/button