FEEDBACK · COMPONENT

Modal

A deliberate pause before an important action.

@raydenui/ui 0.10.1React + TypeScript

Loading the real component…

"use client";
import { useState } from "react";
import { Button, Modal } from "@raydenui/ui";
import "@raydenui/ui/styles.css";

export default function Example({ state = "default" }: { state?: string }) {
  const [open, setOpen] = useState(state === "open");
  const [message, setMessage] = useState("No project changes have been made.");
  return <div>
    <Button onClick={() => setOpen(true)}>Archive project</Button>
    <p role="status" style={{ marginTop: 24 }}>{message}</p>
    <Modal open={open} onClose={() => setOpen(false)} title="Archive this project?" description="This is an interactive demo. Nothing outside this preview will change." primaryLabel="Archive demo" onPrimaryClick={() => { setMessage("Demo project archived."); setOpen(false); }} secondaryLabel="Keep project" onSecondaryClick={() => setOpen(false)} />
  </div>;
}

Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.

Made for real interfaces.

A controlled confirmation dialog combines a title, explanatory copy, and primary and secondary actions. This example lets you cancel or archive a fictional project without affecting real data.

Try it

Open the confirmation, use Keep project or Escape, then try Archive demo. Reset starts the example again.

Modal

Made for real interfaces.

Try it

A few more possibilities.