Dialog

Dialogs are modal windows that appear over the main content. They're used for important messages, confirmations, or collecting user input.

Import

import { Dialog, DialogTrigger, DialogFooter } from '@proyecto-viviana/solid-spectrum';

Basic Dialog

A simple dialog with a title and content.

<DialogTrigger
  trigger={<Button>Open Dialog</Button>}
  content={(close) => (
    <Dialog title="Welcome" onClose={close}>
      <p>This is a basic dialog with some content.</p>
    </Dialog>
  )}
/>

Confirmation Dialog

Dialogs commonly used to confirm destructive actions.

<DialogTrigger
  trigger={<Button variant="negative">Delete Item</Button>}
  content={(close) => (
    <Dialog title="Confirm Delete" onClose={close}>
      <p>Are you sure you want to delete this item?</p>
      <DialogFooter>
        <Button variant="secondary" onPress={close}>Cancel</Button>
        <Button variant="negative" onPress={close}>Delete</Button>
      </DialogFooter>
    </Dialog>
  )}
/>

Form Dialog

Collect user input within a dialog.

<DialogTrigger
  trigger={<Button>Edit Profile</Button>}
  content={(close) => (
    <Dialog title="Edit Profile" onClose={close}>
      <TextField label="Name" defaultValue="John Doe" />
      <TextField label="Email" defaultValue="john@example.com" />
      <DialogFooter>
        <Button variant="secondary" onPress={close}>Cancel</Button>
        <Button variant="primary" onPress={close}>Save</Button>
      </DialogFooter>
    </Dialog>
  )}
/>

Controlled Dialog

Control the dialog's open state programmatically.

const [isOpen, setIsOpen] = createSignal(false);

<DialogTrigger
  isOpen={isOpen()}
  onOpenChange={setIsOpen}
  trigger={<Button>Open</Button>}
  content={(close) => (
    <Dialog title="Controlled Dialog" onClose={close}>...</Dialog>
  )}
/>

Sizes

Dialogs come in different sizes to fit various content needs.

<Dialog title="Small Dialog" size="sm">...</Dialog>
<Dialog title="Medium Dialog" size="md">...</Dialog>
<Dialog title="Large Dialog" size="lg">...</Dialog>

DialogTrigger Props

Props

Prop	Type	Default	Description
`trigger`	JSX.Element	—	Element that opens the dialog
`content`	(close: () => void) => JSX.Element	—	Render function that receives a close callback
`isOpen`	boolean	—	Whether the dialog is open (controlled)
`onOpenChange`	(isOpen: boolean) => void	—	Handler called when open state changes

Dialog Props

Props

Prop	Type	Default	Description
`title`	string	—	Dialog title (recommended for accessibility)
`size`	'sm' \| 'md' \| 'lg' \| 'fullscreen'	`'md'`	Dialog width
`isDismissable`	boolean	`true`	Whether close affordance is shown
`onClose`	() => void	—	Handler called when dialog should close
`children`	JSX.Element	—	Dialog content

Accessibility

Uses modal dialog semantics with keyboard dismissal (Escape)
Focus remains contained while the dialog is open
Focus is restored to the trigger when closed
Includes outside-click dismissal support (configurable)
Document scrolling is prevented while open