Componentes atómicos
São os blocos de construção fundamentais no Nimbus. Referem-se aos elementos de UI mais básicos, como botões, inputs, checkboxes, etc. Esses componentes atômicos são independentes e podem ser usados e reutilizados para formar componentes compostos.
Badge
Comunica a quantidade de itens pendentes ou o estado de um elemento por meio de um contador breve destacado por cor.
Leia a documentaçãoBox
Agrupa, espaça e posiciona elementos aplicando propriedades visuais e de layout sobre um contêiner.
Leia a documentaçãoCheckbox
Permite selecionar uma ou várias opções de uma lista, de forma independente entre si.
Leia a documentaçãoChip
Permite representar critérios, filtros ou atributos aplicados a uma lista de dados, de forma compacta e opcionalmente removível.
Leia a documentaçãoDivider
Separa visualmente seções de conteúdo ou grupos de elementos dentro de uma mesma superfície, por meio de uma linha horizontal ou vertical.
Leia a documentaçãoFile uploader
Permite carregar um arquivo ou uma imagem arrastando-o ou selecionando-o pelo explorador de arquivos do sistema.
Leia a documentaçãoIcon button
Permite executar uma ação representada apenas por um ícone, sem texto visível, quando o espaço é limitado ou a ação é inequívoca.
Leia a documentaçãoIcon
Permite exibir um ícone da biblioteca do Nimbus dentro ou junto de outro conteúdo, para reforçar visualmente uma ação, um estado ou uma mensagem.
Leia a documentaçãoLabel
Nomeia um campo de formulário e descreve qual informação se espera preencher nele.
Leia a documentaçãoLink
Permite navegar para outra página ou seção, ou executar uma ação secundária, com menor peso visual do que um botão.
Leia a documentaçãoList
Permite organizar vários textos relacionados em formato de lista, com marcador ou numeração.
Leia a documentaçãoMultiSelect
Permite escolher várias opções dentro de uma lista predefinida, exibidas como chips removíveis dentro do campo.
Leia a documentaçãoPopover
Permite mostrar ações ou informações complementares em uma caixa flutuante ancorada a um elemento, que se abre ao interagir com ele.
Leia a documentaçãoProgress Bar
Mostra o avanço de uma tarefa mensurável como uma barra que se enche de 0 a 100.
Leia a documentaçãoRadio
Selecionar uma única opção dentro de uma lista de opções mutuamente excludentes.
Leia a documentaçãoSelect
Permite escolher uma opção dentro de uma lista predefinida, exibida em um campo suspenso nativo.
Leia a documentaçãoSkeleton
Exibe um placeholder animado com a forma aproximada de um conteúdo que ainda está carregando, para antecipar sua estrutura e reduzir o salto de layout.
Leia a documentaçãoSlider
Permite selecionar um valor ou um intervalo de valores dentro de uma faixa conhecida, deslizando um controle sobre uma faixa horizontal.
Leia a documentaçãoSpinner
Indica que um processo está em andamento ou que um conteúdo está carregando, por meio de um ícone animado sem texto.
Leia a documentaçãoStack
O componente Stack nos permite agrupar elementos ou componentes de forma horizontal ou vertical.
Leia a documentaçãoTag
Comunica o status ou a categoria de um elemento por meio de uma palavra-chave breve e uma cor semântica.
Leia a documentaçãoText
Escreva e formate blocos de texto com hierarquia tipográfica básica dentro de páginas e componentes.
Leia a documentaçãoTextarea
Permite inserir e editar texto ou conteúdo extenso em um campo de múltiplas linhas.
Leia a documentaçãoThumbnail
Permite exibir a miniatura de uma imagem, com um placeholder automático quando a imagem não está disponível.
Leia a documentaçãoTitle
Dar hierarquia visual e semântica aos títulos, cabeçalhos e seções de conteúdo em uma página.
Leia a documentaçãoToast
Notificar de forma breve e temporária o resultado de uma ação que acabou de ocorrer ou o andamento de um processo, sem interromper a navegação.
Leia a documentaçãoToggle
Permite ativar ou desativar uma configuração binária com efeito imediato, sem uma etapa de salvamento.
Leia a documentaçãoTooltip
Permite mostrar um texto de ajuda breve sobre um elemento ao passar o cursor sobre ele, sem exigir uma interação adicional.
Leia a documentaçãoAjude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.