Carregando…
Carregando…
Carregando…Accessible dialog portal with focus trap, 5 sizes and modal/alert/drawer/side-panel variants.
$ npx kikitocn add modal@/lib/utilsimport { Modal } from "@/components/ui/cn/modal/Modal";
import { Button } from "@/components/ui/cn/button/Button";
import { useState } from "react";
export function ModalExample() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Abrir modal</Button>
<Modal
open={open}
onClose={() => setOpen(false)}
title="Confirmar ação"
>
<p>Tem certeza que deseja continuar?</p>
</Modal>
</>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'modal' | 'alert' | 'drawer' | 'panel' | 'modal' | Família de renderização: modal (diálogo central), alert (confirmação), drawer (painel deslizante) ou panel (painel lateral colapsável) |
intent | 'danger' | 'warning' | 'primary' | 'danger' | variant 'alert': cor/ícone do diálogo de confirmação |
confirmLabel | string | 'Confirm' | variant 'alert': rótulo do botão de confirmação |
cancelLabel | string | 'Cancel' | variant 'alert': rótulo do botão de cancelar |
onConfirm | () => void | undefined | variant 'alert': callback ao confirmar |
loading | boolean | false | variant 'alert': estado de carregamento dos botões |
side | 'right' | 'left' | 'bottom' | 'top' | 'right' | variant 'drawer': borda da tela em que o painel desliza |
drawerSize | 'sm' | 'md' | 'lg' | 'xl' | 'md' | variant 'drawer': escala de tamanho específica do drawer |
footer | ReactNode | undefined | variant 'drawer': conteúdo do rodapé do painel |
panel | ReactNode | undefined | variant 'panel': conteúdo do painel lateral |
panelSide | 'left' | 'right' | 'left' | variant 'panel': lado em que o painel é ancorado |
panelWidth | number | 240 | variant 'panel': largura do painel quando aberto (px) |
defaultOpen | boolean | true | variant 'panel': estado inicial aberto no modo não-controlado |
open* | boolean | — | Controla se o modal está aberto |
onClose* | () => void | — | Callback chamado ao fechar |
title | string | undefined | Título no cabeçalho do modal |
description | string | undefined | Texto de descrição abaixo do título |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Largura máxima do modal |
closeOnOverlay | boolean | true | Fecha ao clicar no overlay |
closeOnEscape | boolean | true | Fecha ao pressionar Escape |
hideClose | boolean | false | Oculta o botão × no cabeçalho |
children | ReactNode | undefined | Conteúdo do modal (use ModalBody, ModalFooter) |
Modal with title, body and footer
sm · md · lg · xl
Alert Dialog — confirmation modal with intent variants
Drawer — slide-in panel from left/right/bottom sides
Side Panel — collapsible split layout
Navigation
Main Content
Click the toggle button on the panel edge to collapse/expand the side panel.