Componentes
Cada componente tem descrição, quando usar, exemplos ao vivo (as mesmas stories do Storybook), código e props. Os níveis seguem o Atomic Design como classificação: um nível só usa componentes do mesmo nível ou de níveis abaixo.
Fundamentos
TypographyTexto com a escala tipográfica do design system.
Layout
ContainerContêiner de página que centraliza e limita a largura do conteúdo.
GridGrade CSS com 1 a 4 colunas e espaçamento configurável.
Átomos
AppAvatarRepresenta uma pessoa, empresa ou ausência de imagem com foto, iniciais ou placeholder.
AppBadgeSelo compacto para comunicar status, contagens ou destaques breves.
AppButtonBotão de ação com variações de aparência, tom e tamanho, ícones, estado de carregamento e modo só-ícone.
AppCheckboxCaixa de seleção nativa com rótulo, mensagem de apoio e estado indeterminado opcional.
AppFeaturedIconÍcone decorativo destacado em um círculo com cor semântica.
AppInputCampo de texto de uma linha com rótulo, texto de apoio, mensagem de erro, ícones e slots laterais.
AppPasswordInputCampo de senha com botão para mostrar ou ocultar o texto digitado. Aceita as mesmas props de campo do
AppPaymentIconÍcone da bandeira de um cartão de pagamento (Visa, Mastercard, Amex, Diners, Discover).
AppProgressIndicador de progresso para uma tarefa, meta ou processamento mensurável.
AppRadioBotão de opção nativo com rótulo e mensagem de apoio opcional.
AppRatingExibe uma nota em estrelas, inclusive com meia estrela, sem permitir interação.
AppSelectCampo de seleção com rótulo, texto de apoio e mensagem de erro, na mesma caixa do AppInput e com a seta
AppSkeletonIndicador de carregamento em forma de barra ou forma arredondada, no lugar de texto ou mídia ainda não disponíveis.
AppSpinnerIndicador circular de carregamento com role="status".
AppTagEtiqueta compacta para rotular, categorizar ou exibir um valor selecionado, opcionalmente removível.
AppTextareaCampo de texto de várias linhas com rótulo, texto de apoio, mensagem de erro e tags opcionais.
AppThumbImagem com proporção fixa e placeholder automático quando não há src ou o carregamento falha.
AppToggleInterruptor nativo para ativar ou desativar uma preferência imediatamente.
Moléculas
AppAlertAviso em linha com ícone, título opcional, mensagem e ação.
AppAvatarGroupAgrupa avatares sobrepostos e informa quantas pessoas não estão visíveis.
AppAvatarLabelExibe um avatar decorativo acompanhado do nome e de uma informação complementar.
AppCardSuperfície de conteúdo composta com AppCardMedia, AppCardBody e AppCardFooter.
AppCheckboxGroupAgrupa caixas de seleção relacionadas em um
AppFileUploadCampo para enviar arquivos: área de soltar (arrastar e soltar) e seleção pelo explorador de arquivos, com
AppPaginationNavegação entre páginas de uma lista, controlada por page e onPageChange.
AppRadioGroupGrupo de escolha exclusiva que renderiza radios nativos a partir de uma lista de opções.
AppTabsAbas para alternar entre painéis de conteúdo na mesma página, compostas com AppTabList, AppTab e AppTabPanel.
AppToastNotificação temporária (posição fixa) com botão de fechar e anúncio para leitores de tela.
FormFieldEstrutura de campo com rótulo, controle fornecido pelo consumidor e feedback acessível.