Componentes Base
Conceito
Os componentes são os blocos de construção reutilizáveis de nosso Design System. Cada componente atende a uma interação específica ou necessidade de UI e foi criado especificamente para trabalhar em conjunto para criar padrões e experiências de usuário intuitivas.
Botões
Um botão aciona um evento ou ação. Eles permitem que os usuários saibam o que acontecerá a seguir depois de acionar o botão.
ESTILOS
PrimaryO botão Primary é aquele que será utilizado com maior frequência dentro da interface. É por meio dele que indicaremos aos usuários todas as ações que queremos que ele faça. Por conta disso, suas características precisam chamar atenção.
Secondary
O botão Secondary é utilizado quando queremos mostrar duas ações mas a primeira delas é a ação principal.
Success e Danger
O botão Success indica o usuário que alguma ação irá ser concluída, se clicado. Já o botão Danger indica o usuário de que a ação/edição feita por ele irá ser cancelada.
Link Button
O botão Link é usado caso haja necessidade além dos Primary e Secundary, ele não possui preenchimento e borda para ser discreto e não sobressair dos demais botões.
Icon + text
Os botões Icon + text vão trazer, sempre, o ícone do lado esquerdo. Esse ícone sempre vai indicar a ação que o usuário fará ao clicar nesse botão, como por exemplo adicionar alguma coisa ou baixar algum documento.
TAMANHOS
ESTADOS
Os estados dos botões servem para dar feedback ao usuário sobre as ações que estão acontecendo quando há uma interação com o botão.
Alertas
Alertas são mensagens em destaque exibidas na parte superior da tela.
- Alertas em verde devem ser utilizados para mensagens de sucesso.
- Alertas em vermelho devem ser utilizado para mensagens de erros.
- Alertas em amarelo devem ser utilizados para mensagens de cautela.
- Alertas em verde claro devem ser utilizados para mensagens padrões.
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Chips
Chips são elementos compactos que representam uma entrada, atributo ou ação.
José Oliveira
José Oliveira
José Oliveira
José Oliveira
José Oliveira
Switches
As opções ativam ou desativam o estado de um único item.
Tabs
As guias organizam o conteúdo em diferentes telas, conjuntos de dados e outras interações.
ESTILOS
VerticalTab 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Tab 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
As guias organizam o conteúdo em diferentes conjuntos de dados.
Text 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Text 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
Text 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Text 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
Paginação
A paginação permite dividir grandes quantidades de conteúdo em pedaços menores em várias páginas.
Radio
Os botões radio permitem que os usuários selecionem uma opção de um conjunto.
Checkbox
Os checkbox permitem que os usuários selecionem mais de uma opção de um conjunto.
Input de texto
Os campos de texto permitem que os usuários insiram texto em uma UI. Eles geralmente aparecem em formulários e caixas de diálogo.
TAMANHOS
Os tamanhos variam apenas na altura do campo e de acordo com o objetivo de uso e local.
ESTADOS
Focus
O campo Focus acontece, normalmente, quando o usuário utiliza o teclado para navegar e selecionar os campos.
Select
Selecionar permite que os usuários façam uma única seleção ou várias seleções em uma lista de opções.
ESTILOS
Existem dois tipos de campo de seleção e seu uso varia de acordo com o objetivo da interface.
Seleção única
Nos campos de seleção única o usuário só pode escolher uma opção dentre uma lista e temos quatro variações para esse campo: placeholder, preenchido, desabilitado e mensagem de campo obrigatório.
Seleção múltipla
Nos campos de seleção múltipla o usuário pode escolher mais de uma opção dentre uma lista de opções.
TAMANHOS
Os tamanhos dos campos de seleção variam apenas na altura do campo e de acordo com o objetivo de uso.
ESTADOS
FocusO campo Focus acontece, normalmente, quando o usuário utiliza o teclado para navegar e selecionar os campos.
DROP DOWN
Aqui estamos exemplificando como fica o dropdown do campo de seleção.
Aqui estamos exemplificando como fica o dropdown do campo de seleção múltipla.
Campo de busca
É por este campo que o usuário irá adicionar seus principais interesses e desejos ao navegar na plataforma.
ESTILOS
Existe apenas um estilo do campo de busca, já que é um campo adicional e opcional para o usuário.
TAMANHOS
Os tamanhos dos campos de busca variam apenas na altura do campo e de acordo com o objetivo de uso.
ESTADOS
FocusO campo Focus acontece, normalmente, quando o usuário utiliza o teclado para navegar e selecionar os campos.
Selecionador de datas
Os selecionadores de data permitem que os usuários selecionem um intervalo de datas.
ESTILOS
No selecionador de datas, o usuário pode selecionar um período de datas e temos quatro variações para esse campo: placeholder, preenchido, desabilitado e mensagem de campo obrigatório.
TAMANHOS
Os tamanhos do selecionador de datas variam apenas na altura do campo e de acordo com o objetivo de uso.
ESTADOS
FocusO campo Focus acontece, normalmente, quando o usuário utiliza o teclado para navegar e selecionar os campos.
SINGLE DATE
Single date mostra apenas uma data e não um período para ser selecionado.
Input de arquivo
Os campos de arquivo permitem que os usuários insiram arquivos em uma UI. Eles podem variar entre inserir apenas um como múltiplos arquivos.
ESTILOS
Existem dois tipos de campo de seleção e seu uso varia de acordo com o objetivo da interface.
Seleção únicaNos campos de seleção única o usuário só pode escolher uma opção dentre uma lista e temos quatro variações para esse campo: placeholder, preenchido, desabilitado e mensagem de campo obrigatório.
Nos campos de seleção múltipla o usuário pode escolher mais de uma opção dentre uma lista de opções.
TAMANHOS
Os tamanhos variam apenas entre a altura do componente.
Lista
As listas são índices contínuos e verticais de texto.
- Text list item
- Text list item
- Text list item
- Text list item
- Text list item
- Text list item
- Text list item
- Text list item
- Text list item
Área de texto
Uma área de texto permite que os usuários insiram texto de formato longo que se estende por várias linhas.
Área de texto para formulários
Tellus arcu vehicula amet faucibus ac mus egestas. Lobortis in ultricies in eu aliquet feugiat ullamcorper felis.
Tabela
As tabelas de dados exibem conjuntos de dados em linhas e colunas.
Cards
Os cards contêm conteúdo e ações sobre um único assunto.
Tooltip
O tooltip é um ícone usado para informar uma breve explicação de algum elemento na página.
