Dialog

Diálogo modal construído com Radix UI, com sobreposição, título, descrição e botões de ação.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`Dialog`	`RadixDialog.RootProps`	`—`	Componente raiz que controla o estado aberto/fechado.
`DialogTrigger`	`RadixDialog.TriggerProps`	`—`	Elemento que abre o diálogo quando ativado.
`DialogContent`	`{ children, className, ...RadixDialog.ContentProps }`	`—`	O painel modal com overlay e botão de fechar.
`DialogHeader`	`{ children, className, ...HTMLDivAttributes }`	`—`	Container para DialogTitle e DialogDescription.
`DialogTitle`	`{ children, className, ...RadixDialog.TitleProps }`	`—`	Título acessível do diálogo.
`DialogDescription`	`{ children, className, ...RadixDialog.DescriptionProps }`	`—`	Descrição acessível do diálogo.
`DialogFooter`	`{ children, className, ...HTMLDivAttributes }`	`—`	Container para botões de ação.
`DialogClose`	`RadixDialog.CloseProps`	`—`	Elemento que fecha o diálogo quando ativado.

Uso

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
} from '@ghiberti85/ui'

<Dialog>
  <DialogTrigger asChild>
    <Button variant="primary">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed? This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button variant="primary">Confirm</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Ver no Storybook

Abrir no Storybook →

←Card Tooltip→