FRȘah Design System

Shadcn modals

Use Dialog for general overlays and AlertDialog for confirmations. Both are available from @/components/Shadcn.

import { Dialog, DialogContent, DialogTrigger } from '@/components/Shadcn/dialog';
import { Button } from '@/components/Shadcn/button';

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>...</DialogContent>
</Dialog>

Dialog

General-purpose dialogs for forms, details, and multi-step tasks.

Default

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit club profile</DialogTitle>
      <DialogDescription>Update public club information.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

With form

<Dialog>
  <DialogTrigger asChild>
    <Button>Add member</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Invite member</DialogTitle>
      <DialogDescription>Send an invitation to join the club.</DialogDescription>
    </DialogHeader>
    <Field>
      <FieldLabel htmlFor="member-email">Email</FieldLabel>
      <Input id="member-email" type="email" placeholder="name@club.ro" />
    </Field>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Send invite</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Alert dialog

Confirmation dialogs for destructive or irreversible actions.

Confirmation

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Publish page</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Publish club page?</AlertDialogTitle>
      <AlertDialogDescription>
        The page will be visible to all visitors.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Publish</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Destructive

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Reject request</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia>
        <TriangleAlert />
      </AlertDialogMedia>
      <AlertDialogTitle>Reject enrollment?</AlertDialogTitle>
      <AlertDialogDescription>
        The player will not be added to the club roster.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Reject</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>