Componentes de sobreposição
Tudo o que flutua sobre a página: diálogos e confirmações, painéis laterais e drawers deslizáveis, popovers, hover cards, tooltips, menus suspensos e de contexto, uma barra de menus e uma paleta de comandos ⌘K.
O foco entra quando abrem e volta quando fecham, eles ficam na tela até 320 pixels de largura e, no celular, os diálogos viram bottom sheets deslizáveis.
- Alert dialogUm diálogo de confirmação para ações destrutivas ou importantes que aguarda trabalho assíncrono e vira um bottom sheet no celular.
- CommandUma lista pesquisável de ações, inline ou como paleta ⌘K, com páginas, atalhos e correspondências destacadas.
- Context menuUm menu de ações ao clicar com o botão direito ou pressionar e segurar, com submenus, itens de checkbox e de rádio e feedback de pressão no toque.
- DialogUma janela sobre a página para formulários e tarefas focadas, com cabeçalho e rodapé fixos, aninhamento e um bottom sheet com deslize no celular.
- DrawerUm painel que desliza a partir de qualquer borda e acompanha o seu dedo, com pontos de ancoragem, uma alça funcional e drawers aninhados que se empilham.
- Dropdown menuUm menu de ações e opções atrás de um botão, com grupos, submenus, itens de checkbox e de rádio e atalhos.
- Hover cardUm card de prévia que abre quando um link recebe hover ou foco, para conteúdo que usuários que enxergam podem conferir rapidamente.
- MenubarUma barra de menus no estilo desktop, com um único destaque que desliza entre os menus abertos e troca instantânea ao percorrer a barra.
- PopoverUm painel flutuante ancorado a um gatilho que se redimensiona suavemente com o conteúdo e segue a direção do gatilho.
- SheetUm painel que desliza a partir de qualquer borda, com deslize para dispensar, bloqueio de rolagem e aninhamento empilhado.
- TooltipUma dica curta no hover ou no foco do teclado que abre após uma breve pausa, alterna instantaneamente entre vizinhos e exibe atalhos.
Usados nos blocos Pro
Blocos para produtos de IA construídos com estes componentes.
- API keysA página de chaves de API de um produto de IA. Cobre um segredo mostrado só uma vez, revogar com desfazer e rotação com período de carência.
- BillingA página de plano e uso de um produto de IA. Cobre créditos que acabam no meio do ciclo, mudanças de plano com rateio e erros de cartão.
- NotificationsA seção Notificações das configurações de um produto de IA. Cobre uma grade de canal por evento, horas de silêncio e a permissão do navegador para push.
- SecurityA seção Segurança das configurações de um produto de IA. Cobre sessões, dois fatores com códigos de recuperação e exclusão atrás de uma confirmação digitada.
- SettingsA página de configurações de um produto de IA. Cobre uma barra de salvar que aparece só quando algo mudou, erros de campo e estados de carregamento.
- TeamA página de equipe das configurações do workspace de um produto de IA. Cobre assentos que acabam, convites pendentes e transferência de propriedade com confirmação digitada.