Dashboard
Visão Geral
Os componentes são elementos de interface oferecidos pelo Padrão Digital de Governo. São projetados com tecnologia agnóstica (HTML, CSS e JavaScript) e encapsulam funcionalidades complexas em unidades independentes, reutilizáveis, consistentes e acessíveis.
Os componentes já foram desenvolvidos considerando o padrão visual e a experiência única do design system — assim, os usuários associam facilmente as características visuais dos produtos e serviços do Governo Federal.
- Componentes
- 42
- Categorias
- 6
- Tokens
- 200+
- Padrões
- 4
Formulários
Entrada e captura de dados do usuário.
Button
Botões são elementos interativos que permitem executar ações ou navegar pela interface.
Ver detalhes →Input
Campo de entrada de texto simples com suporte a validação, ícones e estados.
Ver detalhes →Textarea
Campo de entrada para textos longos com múltiplas linhas.
Ver detalhes →Select
Seletor de opções em lista suspensa para escolha única.
Ver detalhes →Combobox
Combinação de input e select com busca e sugestões filtradas.
Ver detalhes →Checkbox
Permite selecionar uma ou mais opções de uma lista.
Ver detalhes →Check Group
Agrupamento de checkboxes relacionados com rótulo comum.
Ver detalhes →Radio
Permite selecionar apenas uma opção dentro de um grupo.
Ver detalhes →Switch
Interruptor binário para alternar estados on/off.
Ver detalhes →Slider
Controle deslizante para seleção de valores em um intervalo.
Ver detalhes →DateTimePicker
Auxilia a seleção de data e/ou hora por meio de calendário e seletor.
Ver detalhes →Upload
Permite anexar arquivos com feedback de progresso e validação.
Ver detalhes →Magic Button
Botão flutuante para ações rápidas e destaque contextual.
Ver detalhes →Navegação
Orientação e movimentação entre páginas ou etapas.
Menu
Estrutura de navegação lateral hierárquica com grupos e ícones.
Ver detalhes →Tab
Alterna entre painéis de conteúdo relacionados no mesmo espaço.
Ver detalhes →Breadcrumb
Sistema de navegação estrutural que mostra a localização dentro do site.
Ver detalhes →Pagination
Divide conteúdos longos em páginas navegáveis.
Ver detalhes →Wizard
Fluxo guiado em múltiplas etapas para tarefas complexas.
Ver detalhes →Step
Indicador de progresso em fluxos sequenciais.
Ver detalhes →Sign-in
Botão oficial para autenticação com a conta gov.br.
Ver detalhes →Skip-link
Atalho de acessibilidade para pular direto ao conteúdo principal.
Ver detalhes →Feedback & Status
Comunicação de estado, progresso e mensagens.
Message
Mensagens de feedback contextual: sucesso, erro, aviso e informação.
Ver detalhes →Notification
Central de notificações persistentes com histórico e ações.
Ver detalhes →Loading
Indicadores de carregamento em spinner ou barra de progresso.
Ver detalhes →Tooltip
Balão de dica com informação contextual ao passar o cursor.
Ver detalhes →CookieBar
Barra de gestão de cookies conforme requisitos LGPD.
Ver detalhes →Conteúdo & Exibição
Apresentação de informação estruturada.
Card
Superfícies que agrupam conteúdo e ações sobre um único tópico.
Ver detalhes →List
Lista estruturada de itens com densidade e ícones configuráveis.
Ver detalhes →Item
Unidade básica de conteúdo dentro de listas e menus.
Ver detalhes →Table
Tabela para dados tabulares com cabeçalho, densidade e seleção.
Ver detalhes →Tag
Etiqueta compacta para categorização, status e filtros.
Ver detalhes →Avatar
Representação gráfica de usuário: ícone, letra ou foto.
Ver detalhes →Divider
Linha neutra que separa conteúdos, seções ou temas afins.
Ver detalhes →Collapse
Área expansível/recolhível para ocultar ou revelar conteúdo.
Ver detalhes →Carousel
Vários conteúdos ocupam um único espaço navegável em sequência.
Ver detalhes →Icon
Símbolos gráficos para reforçar significado e ações.
Ver detalhes →Link
Referência navegável para páginas internas ou externas.
Ver detalhes →Dropdown
Menu suspenso com ações contextuais ancorado a um gatilho.
Ver detalhes →Sobreposição
Camadas sobre o conteúdo principal.
Estrutura de Página
Blocos institucionais fixos.