Dialog

Focus-trapped modal overlay for confirmations and forms.

Examples

Basic confirm

Simple confirmation dialog with cancel and confirm actions.

Form dialog

Dialog containing a form with labelled input fields.

Destructive action

Danger-scoped dialog with a destructive confirm button.

Scrollable content

Dialog with a fixed header and footer; the body scrolls independently.

Nested dialogs

The first dialog can open a second dialog layered above it.

Custom Close Button

Sticky Footer

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Dialog } from "@rokle/components";

import { useState } from "react";
import { Dialog, Button } from "@rokle/components";

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)} title="Confirm Action">
        <p>Are you sure you want to continue?</p>
        <div className="flex gap-2 mt-4">
          <Button onClick={() => setOpen(false)}>Confirm</Button>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
        </div>
      </Dialog>
    </>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
open	boolean	-	Whether the dialog is visible.
onClose	() => void	-	Called when dialog should close.
title	string	-	Dialog heading.
children	ReactNode	-	Dialog body content.

Previous← ContextMenu NextDrawer →