Dialog · Eyes

Visualizar

import { Button, Dialog } from "@vincisys/eyeson";

export function DialogBasicDemo() {
	return (
		<Dialog.Root>
			<Dialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button
						{...props}
						variant="outline"
						color="neutral-main"
						text="Abrir dialog"
					/>
				)}
			/>
			<Dialog>
				<Dialog.Header>
					<Dialog.Title>Editar perfil</Dialog.Title>
					<Dialog.Description>
						Atualize suas informações. Clique em salvar quando
						terminar.
					</Dialog.Description>
				</Dialog.Header>
				<Dialog.Footer>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button
								{...props}
								variant="outline"
								color="neutral-main"
								text="Cancelar"
							/>
						)}
					/>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button {...props} text="Salvar" />
						)}
					/>
				</Dialog.Footer>
			</Dialog>
		</Dialog.Root>
	);
}

Instalação

import { Dialog } from '@vincisys/eyeson';

Uso

import { Button, Dialog } from '@vincisys/eyeson';

export function Example() {
return (
  <Dialog.Root>
    <Dialog.Trigger render={(p) => <Button {...p} text="Abrir" />} />
    <Dialog>
      <Dialog.Header>
        <Dialog.Title>Editar perfil</Dialog.Title>
        <Dialog.Description>
          Atualize suas informações e clique em salvar.
        </Dialog.Description>
      </Dialog.Header>
      <Dialog.Footer>
        <Dialog.Close render={(p) => <Button {...p} text="Fechar" />} />
      </Dialog.Footer>
    </Dialog>
  </Dialog.Root>
);
}

Exemplos

Básico

Visualizar

import { Button, Dialog } from "@vincisys/eyeson";

export function DialogBasicDemo() {
	return (
		<Dialog.Root>
			<Dialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button
						{...props}
						variant="outline"
						color="neutral-main"
						text="Abrir dialog"
					/>
				)}
			/>
			<Dialog>
				<Dialog.Header>
					<Dialog.Title>Editar perfil</Dialog.Title>
					<Dialog.Description>
						Atualize suas informações. Clique em salvar quando
						terminar.
					</Dialog.Description>
				</Dialog.Header>
				<Dialog.Footer>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button
								{...props}
								variant="outline"
								color="neutral-main"
								text="Cancelar"
							/>
						)}
					/>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button {...props} text="Salvar" />
						)}
					/>
				</Dialog.Footer>
			</Dialog>
		</Dialog.Root>
	);
}

Alert dialog (ações destrutivas)

Use role="alertdialog" no Dialog.Root para fluxos de confirmação de ações destrutivas ou irreversíveis. Diferente do dialog padrão, ele não fecha ao clicar fora — exige uma escolha explícita.

Visualizar

import { Button, Dialog } from "@vincisys/eyeson";

export function DialogAlertDemo() {
	return (
		<Dialog.Root role="alertdialog">
			<Dialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button
						{...props}
						color="red-main"
						text="Excluir projeto"
					/>
				)}
			/>
			<Dialog>
				<Dialog.Header>
					<Dialog.Title>Excluir projeto?</Dialog.Title>
					<Dialog.Description>
						Essa ação não pode ser desfeita. Todos os dados do
						projeto serão removidos permanentemente.
					</Dialog.Description>
				</Dialog.Header>
				<Dialog.Footer>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button
								{...props}
								variant="outline"
								color="neutral-main"
								text="Cancelar"
							/>
						)}
					/>
					<Dialog.Close
						render={({ color: _color, ...props }) => (
							<Button
								{...props}
								color="red-main"
								text="Excluir"
							/>
						)}
					/>
				</Dialog.Footer>
			</Dialog>
		</Dialog.Root>
	);
}

Tamanhos

size aceita sm, md (padrão), lg e xl.

Visualizar

import { Button, Dialog } from "@vincisys/eyeson";

export function DialogSizesDemo() {
	return (
		<div className="flex flex-wrap gap-3">
			{(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
				<Dialog.Root key={size}>
					<Dialog.Trigger
						render={({ color: _color, ...props }) => (
							<Button
								{...props}
								variant="outline"
								color="neutral-main"
								size="sm"
								text={size}
							/>
						)}
					/>
					<Dialog size={size}>
						<Dialog.Header>
							<Dialog.Title>Dialog {size}</Dialog.Title>
							<Dialog.Description>
								Este dialog usa o tamanho <code>{size}</code>.
							</Dialog.Description>
						</Dialog.Header>
						<Dialog.Footer>
							<Dialog.Close
								render={({ color: _color, ...props }) => (
									<Button {...props} text="Fechar" />
								)}
							/>
						</Dialog.Footer>
					</Dialog>
				</Dialog.Root>
			))}
		</div>
	);
}

Controlado

Passe open e onOpenChange em Dialog.Root para controlar a abertura a partir de fora, sem precisar de um Dialog.Trigger.

Visualizar

import { useState } from "react";
import { Button, Dialog } from "@vincisys/eyeson";

export function DialogControlledDemo() {
	const [open, setOpen] = useState(false);

	return (
		<div className="flex items-center gap-3">
			<Button
				variant="outline"
				color="neutral-main"
				onClick={() => setOpen(true)}
				text="Abrir de fora"
			/>
			<Dialog.Root open={open} onOpenChange={setOpen}>
				<Dialog>
					<Dialog.Header>
						<Dialog.Title>Dialog controlado</Dialog.Title>
						<Dialog.Description>
							O estado <code>open</code> é gerenciado pelo
							componente pai.
						</Dialog.Description>
					</Dialog.Header>
					<Dialog.Footer>
						<Dialog.Close
							render={({ color: _color, ...props }) => (
								<Button {...props} text="Fechar" />
							)}
						/>
					</Dialog.Footer>
				</Dialog>
			</Dialog.Root>
		</div>
	);
}