FormDialog · Eyes

Visualizar

import { User } from "lucide-react";
import { Button, FormDialog } from "@vincisys/eyeson";

export function FormDialogBasicDemo() {
	return (
		<FormDialog.Root>
			<FormDialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button {...props} text="Com ícone" />
				)}
			/>
			<FormDialog size="md">
				<FormDialog.Header
					icon={User}
					title="Novo contato"
					subtitle="Preencha os dados abaixo"
				/>
				<FormDialog.Body>
					<FormFields />
				</FormDialog.Body>
				<FormDialog.Footer>
					<FormActions />
				</FormDialog.Footer>
			</FormDialog>
		</FormDialog.Root>
	);
}

Instalação

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

Uso

import { Button, FormDialog } from '@vincisys/eyeson';
import { User } from 'lucide-react';

export function Example() {
return (
  <FormDialog.Root>
    <FormDialog.Trigger render={(p) => <Button {...p} text="Abrir" />} />
    <FormDialog size="md">
      <FormDialog.Header
        icon={User}
        title="Novo contato"
        subtitle="Preencha os dados abaixo"
      />
      <FormDialog.Body>
        {/* campos */}
      </FormDialog.Body>
      <FormDialog.Footer>
        <FormDialog.Close
          render={(p) => (
            <Button {...p} variant="outline" color="neutral-main" text="Cancelar" />
          )}
        />
        <Button text="Salvar" />
      </FormDialog.Footer>
    </FormDialog>
  </FormDialog.Root>
);
}

O FormDialog.Header aceita:

Prop	Tipo	Descrição
`icon`	`LucideIcon`	Ícone à esquerda (opcional)
`title`	`ReactNode`	Título principal
`subtitle`	`ReactNode`	Texto auxiliar abaixo do título
`showCloseButton`	`boolean`	Exibe o X no canto (`true` por padrão)

Exemplos

Com ícone

Passe um ícone do Lucide na prop icon:

Visualizar

import { User } from "lucide-react";
import { Button, FormDialog } from "@vincisys/eyeson";

export function FormDialogBasicDemo() {
	return (
		<FormDialog.Root>
			<FormDialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button {...props} text="Com ícone" />
				)}
			/>
			<FormDialog size="md">
				<FormDialog.Header
					icon={User}
					title="Novo contato"
					subtitle="Preencha os dados abaixo"
				/>
				<FormDialog.Body>
					<FormFields />
				</FormDialog.Body>
				<FormDialog.Footer>
					<FormActions />
				</FormDialog.Footer>
			</FormDialog>
		</FormDialog.Root>
	);
}

<FormDialog.Header
icon={User}
title="Novo contato"
subtitle="Preencha os dados abaixo"
/>

Sem ícone

Omita a prop icon para deixar só título e subtítulo:

Visualizar

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

export function FormDialogWithoutIconDemo() {
	return (
		<FormDialog.Root>
			<FormDialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button
						{...props}
						variant="outline"
						color="neutral-main"
						text="Sem ícone"
					/>
				)}
			/>
			<FormDialog size="md">
				<FormDialog.Header
					title="Novo contato"
					subtitle="Preencha os dados abaixo"
				/>
				<FormDialog.Body>
					<FormFields />
				</FormDialog.Body>
				<FormDialog.Footer>
					<FormActions />
				</FormDialog.Footer>
			</FormDialog>
		</FormDialog.Root>
	);
}

<FormDialog.Header
title="Novo contato"
subtitle="Preencha os dados abaixo"
/>

Alterando o ícone

Troque o componente Lucide passado em icon (ex.: Mail, Building2):

Visualizar

import { Building2, Mail } from "lucide-react";
import { Button, FormDialog } from "@vincisys/eyeson";

export function FormDialogCustomIconDemo() {
	return (
		<div className="flex flex-wrap gap-3">
			<FormDialog.Root>
				<FormDialog.Trigger
					render={({ color: _color, ...props }) => (
						<Button
							{...props}
							variant="outline"
							color="neutral-main"
							text="Ícone Mail"
						/>
					)}
				/>
				<FormDialog size="md">
					<FormDialog.Header
						icon={Mail}
						title="Enviar convite"
						subtitle="Informe o destinatário"
					/>
					<FormDialog.Body>
						<FormFields />
					</FormDialog.Body>
					<FormDialog.Footer>
						<FormActions />
					</FormDialog.Footer>
				</FormDialog>
			</FormDialog.Root>

			<FormDialog.Root>
				<FormDialog.Trigger
					render={({ color: _color, ...props }) => (
						<Button
							{...props}
							variant="outline"
							color="neutral-main"
							text="Ícone Building"
						/>
					)}
				/>
				<FormDialog size="md">
					<FormDialog.Header
						icon={Building2}
						title="Nova empresa"
						subtitle="Cadastre os dados da organização"
					/>
					<FormDialog.Body>
						<FormFields />
					</FormDialog.Body>
					<FormDialog.Footer>
						<FormActions />
					</FormDialog.Footer>
				</FormDialog>
			</FormDialog.Root>
		</div>
	);
}

import { Mail, Building2 } from 'lucide-react';

<FormDialog.Header
icon={Mail}
title="Enviar convite"
subtitle="Informe o destinatário"
/>

<FormDialog.Header
icon={Building2}
title="Nova empresa"
subtitle="Cadastre os dados da organização"
/>

Personalizando título e subtítulo

title e subtitle aceitam qualquer ReactNode — strings ou conteúdo customizado:

Visualizar

import { User } from "lucide-react";
import { Button, FormDialog } from "@vincisys/eyeson";

export function FormDialogCustomTitleDemo() {
	return (
		<FormDialog.Root>
			<FormDialog.Trigger
				render={({ color: _color, ...props }) => (
					<Button
						{...props}
						variant="outline"
						color="neutral-main"
						text="Título personalizado"
					/>
				)}
			/>
			<FormDialog size="md">
				<FormDialog.Header
					icon={User}
					title="Editar perfil"
					subtitle="Atualize nome e sobrenome do usuário"
				/>
				<FormDialog.Body>
					<FormFields />
				</FormDialog.Body>
				<FormDialog.Footer>
					<FormActions />
				</FormDialog.Footer>
			</FormDialog>
		</FormDialog.Root>
	);
}

<FormDialog.Header
icon={User}
title="Editar perfil"
subtitle="Atualize nome e sobrenome do usuário"
/>