Dialog

One question, two equal-sized actions, no third option.

Remove this item?

This can’t be undone.

Install

npx raster add dialog

Markup

<div class="rs-dialog"><span class="rs-dialog-title">Remove this item?</span><p class="rs-dialog-body">This can't be undone.</p><div class="rs-dialog-actions"><button class="rs-btn-ghost rs-btn-sm">Cancel</button><button class="rs-btn-primary rs-btn-sm">Remove</button></div></div>

React

import { Dialog, DialogActions, DialogBody, DialogTitle } from "@/components/raster/dialog";
import { Button } from "@/components/raster/button";

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogTitle>Remove this item?</DialogTitle>
  <DialogBody>This can't be undone.</DialogBody>
  <DialogActions>
    <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>Cancel</Button>
    <Button size="sm" onClick={remove}>Remove</Button>
  </DialogActions>
</Dialog>

Classes

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

Depends on

/button