Dialog — Frontfriend

Interactive preview

Built on Radix UI. Component colors, typography and styling come from your Design System.

Installation

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

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

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

Usage & composition

Radix uses asChild to compose a trigger with your Button. Forward the ref and spread the incoming props when composing with a custom child.

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

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button>Start something new</Button></DialogTrigger>
      <DialogContent 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 asChild><Button variant="outline">Got it</Button></DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Controlled dialogs

Control open and onOpenChange on Dialog. 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 Radix UI.

Prop / part	Type	Default	Purpose
`open`	boolean	`—`	Control the root’s open state.
`DialogContent.width`	xs \| sm \| md \| lg \| 3xl \| 5xl \| full \| fit	`md`	Select a configured modal width.
`DialogContent.height`	auto \| full	`—`	Select a configured height.
`DialogContent.showCloseButton`	boolean	`true`	Include the configured close button.
`DialogContent.closeOnOutside`	boolean	`true`	Allow outside interaction to dismiss.
`DialogBody.padding`	boolean	`true`	Pinned Radix source still uses padding. The canonical noPadding conversion remains a contract gap.
`DialogFooter.align`	end \| justify \| start \| stretch	`end`	Choose configured action alignment.

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.