Componentes
Modal
Papel sobre scrim de Graffiti. No celular vira folha que sobe; no desktop pousa e a borda de luz acende depois. O rodapé é a faixa da decisão; o corpo rola.
estávelDiálogodesde 0.1.0@hiboupay/react
Exemplos#
Folha no celular · centro no desktop · quatro larguras
Importar#
tsx
import { Modal } from "@hiboupay/react";
import type { ModalProps } from "@hiboupay/react";Quando usar#
Use quando
- Tarefa curta que precisa de foco: atribuir, editar um campo, revisar.
- Detalhe que não merece página.
Não use quando
- Confirmação de ação irreversível: ConfirmGate.
- Fluxo longo com várias etapas: página.
Variantes#
sm · 420
Gate, confirmação.
md · 520
Padrão.
lg · 720
Formulário com duas colunas.
xl · 960
Revisão com tabela.
Anatomia#
- 01Scrim (hb-scrim)
- 02Alça (só no celular)
- 03Título Sora 18 e descrição
- 04Fechar (X)
- 05Corpo com rolagem
- 06Rodapé com ações
Estados#
fechadoabrindo (folha no celular, assenta no desktop)aberto
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open* | boolean | Controlado. | |
| onOpenChange* | (open: boolean) => void | Fechar por X, Esc ou clique no scrim. | |
| title* | ReactNode | Título acessível. | |
| description | ReactNode | Descrição acessível. | |
| footer | ReactNode | Ações. Empilham no celular com a principal por baixo. | |
| size | "sm" | "md" | "lg" | "xl" | "md" | Largura máxima no desktop. |
| children | ReactNode | Corpo. |
Acessibilidade#
Teclado
EscFecha.
TabCircula dentro do diálogo (foco preso).
Leitor de tela
- —role=dialog com aria-labelledby (title) e aria-describedby (description).
- —Foco volta ao gatilho ao fechar.
Boas práticas#
Faça
- Título diz a tarefa.
- Ação principal repete o verbo do título.
Evite
- Modal sobre modal.
- Modal para aviso que não pede decisão.
Conteúdo#
- —Título: verbo + objeto ("Atribuir responsável").
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.