Início Boas práticas Tema Idiomas e RTL App e cabeçalho Layout Tipografia Abas Menu e âncora Dropdown e popover Command e toggles Botão Campos Seleção e valores Combobox e menções Datas e calendário Árvore e cascata Transfer Upload Filtros Tabela Planilha KPI e estatística Badge e tag Listas e detalhes Gráficos Imagem e carrossel Ícones Diagramas Alertas e estados Progresso e passos Diálogo e toast Drawer e notificação Utilitários Overview Work queue Report Report com htmx Form / request Tabela administrativa Página de detalhe Formulário em diálogo Gráfico com dados do servidor Buscar… llms.txt Tema Tema Restaurar Retos (4 / 2)Padrão (8 / 6)Arredondados (16 / 10) ConfortávelCompacta ClaroEscuroAutomático Copiar prompt Copiar snippet Prompt: para as instruções de um agente. Snippet: direto no templates/base.html. v0.11.0 Progress of an operation (uploads, imports, goals): a line, a circle or a dashboard gauge. Upload de arquivosBarra de progresso por arquivo: label nomeia o que está em andamento, status=active anima enquanto roda, 100% fica verde e status=exception fica vermelho. Reiniciar envio <ab-stack gap="4" id="uploads-demo"> <ab-progress label="contrato-assinado.pdf" value="100"></ab-progress> <ab-progress label="planilha-vendas-outubro.xlsx" value="0" status="active" id="upload-planilha"></ab-progress> <ab-progress label="fotos-vistoria.zip" value="38" status="exception" text="Falhou"></ab-progress> <ab-progress label="Documentos do cadastro" value="60" steps="5" text="3 de 5" tone="info"></ab-progress> <ab-cluster> <ab-button id="upload-reiniciar" icon="arrow-counter-clockwise" size="sm">Reiniciar envio</ab-button> </ab-cluster> </ab-stack> <script type="module"> const bar = document.querySelector("#upload-planilha"); let timer; function run() { clearInterval(timer); bar.value = 0; bar.status = "active"; timer = setInterval(() => { bar.value = Math.min(100, bar.value + 7 + Math.random() * 10); if (bar.value >= 100) { clearInterval(timer); bar.status = "normal"; } }, 500); } document.querySelector("#upload-reiniciar").addEventListener("click", run); run(); </script> Círculo e paineltype=circle para metas e cotas; type=dashboard deixa uma abertura embaixo. size aceita sm, md, lg ou pixels. <ab-cluster gap="6"> <ab-progress type="circle" value="72" label="Meta do mês"></ab-progress> <ab-progress type="circle" value="100" label="Onboarding"></ab-progress> <ab-progress type="circle" value="45" status="exception" label="Sincronização"></ab-progress> <ab-progress type="dashboard" value="0.83" ratio label="Uso do armazenamento" tone="warn"></ab-progress> <ab-progress type="circle" size="sm" value="30"></ab-progress> </ab-cluster> Aprovação de despesaab-steps com items e current: anteriores ficam concluídos, posteriores aguardando. status=error marca a etapa atual com erro. <ab-stack gap="6"> <ab-steps id="steps-aprovacao" current="2"></ab-steps> <ab-steps id="steps-erro" current="1" status="error" size="sm"></ab-steps> </ab-stack> <script type="module"> const etapas = [ { title: "Solicitação", description: "Juliana · 03/11" }, { title: "Gestor", description: "Aprovado por Carlos" }, { title: "Financeiro", description: "Em análise" }, { title: "Pagamento", description: "Previsto para 10/11" }, ]; document.querySelector("#steps-aprovacao").items = etapas; document.querySelector("#steps-erro").items = [ { title: "Dados" }, { title: "Validação", description: "CNPJ não encontrado" }, { title: "Concluído" }, ]; </script> Assistente clicável e verticalclickable transforma as etapas em botões que disparam ab-step-change { index }; direction=vertical e progress-dot para trilhas compactas. Etapa atual: Empresa <ab-grid cols="2" min="18rem"> <ab-stack gap="3"> <ab-steps id="steps-wizard" clickable current="0"></ab-steps> <ab-alert id="steps-wizard-info" tone="info">Etapa atual: Empresa</ab-alert> </ab-stack> <ab-steps id="steps-vertical" direction="vertical" progress-dot current="1"></ab-steps> </ab-grid> <script type="module"> const wizard = document.querySelector("#steps-wizard"); wizard.items = [{ title: "Empresa", icon: "buildings" }, { title: "Sócios", icon: "users" }, { title: "Banco", icon: "bank" }, { title: "Revisão", icon: "check-circle" }]; wizard.addEventListener("ab-step-change", (e) => { document.querySelector("#steps-wizard-info").textContent = `Etapa atual: ${wizard.items[e.detail.index].title}`; }); document.querySelector("#steps-vertical").items = [ { title: "Pedido recebido", description: "03/11 09:12" }, { title: "Em separação", description: "Previsão 04/11" }, { title: "Enviado" }, { title: "Entregue" }, ]; </script> Resultado de sucesso e erroab-result fecha um fluxo: ícone grande, título, descrição e a próxima ação no slot actions. O slot padrão recebe detalhes. Ver pedido Criar outro Tentar de novo Motivo informado pelo banco: saldo insuficiente. <ab-grid cols="2" min="18rem"> <ab-card> <ab-result status="success" heading="Pedido enviado" description="O pedido #4471 foi enviado ao financeiro. Você recebe um e-mail quando for aprovado."> <ab-button slot="actions" variant="primary">Ver pedido</ab-button> <ab-button slot="actions">Criar outro</ab-button> </ab-result> </ab-card> <ab-card> <ab-result status="error" heading="Falha no pagamento" description="O banco recusou o cartão final 4242. Nada foi cobrado."> <ab-button slot="actions" variant="primary">Tentar de novo</ab-button> <ab-alert tone="danger">Motivo informado pelo banco: saldo insuficiente.</ab-alert> </ab-result> </ab-card> </ab-grid> Página 403Os status 404, 403 e 500 já vêm com título e descrição em pt-BR; troque com heading e description. Voltar ao início Pedir acesso <ab-card> <ab-result status="403"> <ab-button slot="actions" variant="primary" href="#">Voltar ao início</ab-button> <ab-button slot="actions">Pedir acesso</ab-button> </ab-result> </ab-card> Avisos e páginas de erroinfo, warning, 404 e 500. <ab-grid cols="4" min="12rem"> <ab-result status="info" heading="Importação agendada"></ab-result> <ab-result status="warning" heading="Revise os dados"></ab-result> <ab-result status="404"></ab-result> <ab-result status="500"></ab-result> </ab-grid> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-progress>Progress of an operation (uploads, imports, goals): a line, a circle or a dashboard gauge. value goes from 0 to 100 (or 0 to 1 with ratio). It turns green at 100% and red with status="exception"; status="active" animates the bar while work is running. The fill animates between values. <ab-steps>Steps of a process (wizard, approval flow, order status). Give items from JavaScript ([{ title, description?, status?, icon? }]) and the current index; earlier steps are finished, later ones waiting. With clickable, steps are buttons that fire ab-step-change. Horizontal steps stack vertically in narrow containers. <ab-result>Outcome page or panel: big status icon, heading, description and next actions. Use for "Pedido enviado", "Falha no pagamento" and the 404/403/500 pages (those come with a default pt-BR heading and description).