Componentes GOVBR-DS

Botão em variantes primary, secondary, tertiary e danger; três tamanhos.

Campo de texto com label, ajuda e erro acessíveis.

Área de texto multi-linha com label, ajuda e erro.

Menu suspenso de opções únicas com foco dourado.

Select com busca — extensão útil ao lado de Select nativo.

Caixa de seleção com estado indeterminado e foco dourado.

Agrupamento acessível de checkboxes usando <fieldset>.

Botão de rádio dentro de <GovRadioGroup>.

Interruptor liga/desliga acessível.

Controle de intervalo com rótulo e formato de valor.

Campo de data/hora acessível baseado em input nativo com ícone.

Área de envio de arquivos com drag-and-drop e validação de tamanho.

Botão flutuante circular para ação primária persistente. Adicione <GovMagicButton /> ao layout.

Menu lateral navegável — ver GovSidebar em /components/patterns/gov-sidebar.tsx e a própria estrutura desta página.

Abas horizontais com foco dourado e conteúdo controlado.

Trilha de navegação hierárquica no padrão br-breadcrumb: ícone de Início, separador chevron, item ativo com aria-current e colapso automático quando a trilha é longa.

Navegação entre páginas com botão anterior/próximo e reticências.

Assistente multi-etapa com navegação anterior/próximo.

Indicador de progresso multi-etapa (horizontal/vertical) + Stepper completo com painel e navegação.

Botão oficial 'Entrar com gov.br' em três tamanhos. Pill preta com destaque dourado no logotipo.

Link 'Pular para o conteúdo' visível ao foco. Ver GovSkipLink.

Alerta de feedback nas cores success, danger, warning e info.

Central de notificações em popover com badge de não lidas.

Spinner acessível em quatro tamanhos e barra de progresso indeterminada.

Dica contextual em popover — funciona sem TooltipProvider externo.

Barra fixa inferior de consentimento a cookies. Persiste a escolha em localStorage.

Contêiner de conteúdo institucional com título, corpo e ações.

Container com itens divididos e título opcional (ver Item).

Linha interativa usada em listas, menus e resultados.

Tabela responsiva com faixas alternadas, hover e densidades.

Rótulo compacto em variantes semânticas.

Representação visual do usuário com fallback de iniciais e três tamanhos.

Separador horizontal/vertical com espessura e rótulo opcional.

Área expansível — implementado como Accordion single/multi.

Exibição rotativa de conteúdo com controles prev/next, indicadores e navegação por teclado (←/→).

Sistema de ícones baseado em lucide-react — utilize diretamente com classes text-* e h-4/w-4.

Link estilizado com variantes primary/neutral, tamanhos e indicação de externo.

Menu suspenso de ações com estado ativo e ícones.

Diálogo modal centralizado com header (título editável + subtítulo com autor), toolbar de formatação, editor rico (contentEditable), gerenciamento de tags e footer com ações (rascunho, publicar). Ver também a rota /excluir-item.

Overlay semi-transparente em três níveis (light/medium/dark). Usado internamente por Modal/Drawer.

Cabeçalho institucional com densidades small/medium/large, slots de acesso e busca, e faixa gov.br opcional com botão da marca do Governo Federal (padrão FNDE).

Ministério da Educação

AcessibilidadeAlto contraste Entrar

FNDEFundo Nacional de Desenvolvimento da Educação

FNDEFundo Nacional de Desenvolvimento da Educação

Rodapé institucional com colunas de links e assinatura.

Estrutura de página para painéis analíticos: sidebar escura, topbar com filtros, KPIs, gráficos (área, barras, donut) e tabela de execução. Baseado em ds.cxdesigner.com.br/templates/dashboard-bi.