Dialog — Frontfriend

Interactive preview

Built on React Aria. Component colors, typography and styling come from your Design System.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

npx frontfriend download dialog -f react --primitive aria --registry v4

Review dependencies reported by the downloader and keep your source changes in version control.

Usage & composition

React Aria retains its native API. Use onPress and isDisabled for buttons. Its DialogTrigger is the outer controller, and Dialog contains the modal; it does not use the Radix root/content arrangement.

import { Button } from '@/components/ui/button';
import {
  DialogTrigger, Dialog, DialogBody, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from '@/components/ui/dialog';

export function Example() {
  return (
    <DialogTrigger>
      <Button>Start something new</Button>
      <Dialog showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>A fresh start.</DialogTitle>
          <DialogDescription>Your next chapter begins here.</DialogDescription>
        </DialogHeader>
        <DialogBody><p>Build from the foundations you know.</p></DialogBody>
        <DialogFooter><DialogClose>Got it</DialogClose></DialogFooter>
      </Dialog>
    </DialogTrigger>
  );
}

Controlled dialogs

Control isOpen and onOpenChange on the outer DialogTrigger. Close only after a successful asynchronous action. Preserve the user’s input when validation fails.

Keep the title and description in the dialog composition. A complex form may need explicit initial focus and an associated error summary; test it in your application.

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by React Aria.

Prop / part	Type	Default	Purpose
`DialogTrigger`	controller	`—`	Wrap the trigger Button and the Dialog.
`Dialog.isDismissable`	boolean	`true`	Allow dismissal outside the modal.
`Dialog.showCloseButton`	boolean	`true`	Include the configured close control.
`Dialog.width`	xs \| sm \| md \| lg \| 3xl \| 5xl \| full \| fit	`md`	Select a configured modal width.
`Dialog.height`	auto \| full	`auto`	Select a configured height.
`DialogTrigger.isOpen`	boolean	`—`	Controlled open state; pair with onOpenChange.
`DialogClose`	close-slot Button	`—`	Use the native close slot to dismiss the modal.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.

Accessibility

Include an accessible title and a useful description.
Check initial focus, focus containment and focus restoration.
Test Escape and outside dismissal in the real product context.
Use an alert dialog for decisions that require explicit acknowledgement; do not silently change a dialog’s role.