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ção
Box

Agrupa, espaça e posiciona elementos aplicando propriedades visuais e de layout sobre um contêiner.

Leia a documentação
Button

Permite iniciar uma ação, confirmar uma decisão ou avançar em um processo.

Leia a documentação
Checkbox

Permite selecionar uma ou várias opções de uma lista, de forma independente entre si.

Leia a documentação
Chip

Permite representar critérios, filtros ou atributos aplicados a uma lista de dados, de forma compacta e opcionalmente removível.

Leia a documentação
Divider

O componente Divider é um elemento visual atômico utilizado para separar seções de conteúdo ou grupos de elementos dentro de uma mesma interface.

Leia a documentação
File uploader

O componente File Uploader é utilizado para fazer o upload de arquivos.

Leia a documentação
Icon 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ção
Icon

O componente Icon é utilizado quando precisamos ilustrar uma ação, estado ou texto dentro ou fora de outro componente.

Leia a documentação
Input

O componente Input permite ao usuário inserir ou editar informações em formato de texto.

Leia a documentação
Label

Nomeia um campo de formulário e descreve qual informação se espera preencher nele.

Leia a documentação
Link

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ção
List

O componente List nos permite organizar informações em formato de texto em uma lista.

Leia a documentação
Popover

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ção
Progress Bar

O componente Progress Bar nos permite mostrar o progresso de uma tarefa.

Leia a documentação
Radio

O componente Radio nos permite escolher uma única opção dentro de uma lista de seleção.

Leia a documentação
Select

O componente Select permite ao usuário selecionar uma opção dentro de uma lista.

Leia a documentação
Skeleton

O componente Skeleton nos permite comunicar de forma visual o carregamento de outros componentes.

Leia a documentação
Slider

O componente Slider permite aos usuários selecionar um valor único ou um intervalo de valores deslizando um controle ao longo de uma faixa horizontal.

Leia a documentação
Spinner

O componente Spinner nos permite informar o carregamento de conteúdos.

Leia a documentação
Stack

O componente Stack nos permite agrupar elementos ou componentes de forma horizontal ou vertical.

Leia a documentação
Tag

Comunica o status ou a categoria de um elemento por meio de uma palavra-chave breve e uma cor semântica.

Leia a documentação
Text

O Text é o componente de texto, utilizado para escrever e formatar blocos de conteúdo dentro de páginas ou componentes.

Leia a documentação
Textarea

O componente Textarea permite ao usuário inserir ou editar informações em formato de texto longo.

Leia a documentação
Thumbnail

O componente Thumbnail nos permite apresentar miniaturas de imagens.

Leia a documentação
Title

Titles são componentes de texto, utilizados para empregar hierarquia visual e semântica aos conteúdos de uma página.

Leia a documentação
Toast

O componente Toast nos permite notificar usuários em um tom informacional, descrevendo que algo aconteceu ou está acontecendo, sem interromper a navegação.

Leia a documentação
Toggle

Permite ativar ou desativar uma configuração binária com efeito imediato, sem uma etapa de salvamento.

Leia a documentação
Tooltip

O componente Tooltip nos permite mostrar uma informação adicional de forma não intrusiva.

Leia a documentação

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.