Componentes
Este é o ponto de entrada do sistema. Em cada componente, escolha explicitamente a implementação que deseja consultar. O catálogo mostra as quatro saídas e seus estados; somente as que possuem contrato e página utilizável funcionam como links.
Ações
Componentes que iniciam ou confirmam uma ação.
- ButtonDispara ações, confirma decisões e avança processos com hierarquia clara.
Conteúdo e estrutura
Elementos para organizar, separar e apresentar informação.
- AvatarRepresenta uma pessoa ou organização por imagem, iniciais ou fallback.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactIndisponível
- AngularPlanejada
- CardAgrupa conteúdo e ações relacionadas em uma superfície delimitada.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- DividerSepara regiões de conteúdo sem introduzir uma nova superfície.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- TableOrganiza dados relacionados em linhas e colunas com cabeçalhos semânticos.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactIndisponível
- AngularPlanejada
Entrada e seleção
Controles para coletar, editar e selecionar dados.
- CheckboxPermite selecionar zero, uma ou várias opções independentes.
- ComboboxFiltra uma lista de opções e permite selecionar um valor pelo teclado ou ponteiro.
- Form FieldCompõe label, controle, ajuda e erro em um campo acessível.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularPlanejada
- Input TextColeta texto curto, dados estruturados ou valores de uma única linha.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- RadioPermite escolher exatamente uma opção entre alternativas relacionadas.
- SelectSeleciona um único valor de uma lista conhecida sem campo de busca.
- TextareaColeta texto livre que pode ocupar várias linhas.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- ToggleAlterna imediatamente uma configuração entre ligada e desligada.
Feedback e status
Componentes que comunicam resultado, progresso ou estado.
- AlertComunica informação, confirmação, atenção ou erro dentro do fluxo atual.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- BadgeIdentifica status ou metadados curtos próximos ao conteúdo relacionado.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularBeta
- SkeletonRepresenta temporariamente a estrutura do conteúdo durante o carregamento.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularPlanejada
- SpinnerIndica progresso indeterminado para uma operação em andamento.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactBeta
- AngularPlanejada
- ToastConfirma resultados e comunica feedback transitório sem interromper o fluxo atual.
Navegação
Padrões para orientar deslocamento e localização no produto.
- BreadcrumbIndica a posição atual na hierarquia e oferece acesso aos níveis anteriores.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactIndisponível
- AngularPlanejada
- MenuOferece uma lista curta de comandos contextuais a partir de um Button.
- PaginationDivide coleções extensas e permite navegar entre páginas de resultados.
- HTML/CSS/JSEstável
- Ark/ZagPlanejada
- ReactIndisponível
- AngularPlanejada
- TabsAlterna painéis relacionados no mesmo contexto com seleção e teclado previsíveis.
Overlay e disclosure
Componentes que revelam conteúdo contextual ou em uma nova camada.
- AccordionOrganiza conteúdo relacionado em seções que podem ser expandidas ou recolhidas.
- ModalInterrompe o fluxo para uma decisão ou tarefa que exige atenção concentrada.
- PopoverExibe conteúdo contextual breve ancorado a um trigger, sem interromper o restante da página.
- TooltipExibe um label visual breve quando um trigger recebe hover ou focus.