Botões

O componente de botão é fundamental para a navegação e chamadas para ação (CTAs) dentro do portal. Ele padroniza o estilo visual e garante acessibilidade em diferentes contextos.

Exemplos Visuais

Variante: Navegação (`nav`)

Botões arredondados (pill-shape), ideais para menus laterais, barras de navegação e ações secundárias.

Botão Padrão Com Ícone

Variante: Módulo (`module`)

Botões com bordas levemente arredondadas, desenhados para compor cards e seções de conteúdo principal.

Acessar Módulo Próximo Nível

Como Utilizar

Macro Nunjucks

Para usar este componente, importe a biblioteca de macros no topo do seu arquivo.

1. Importação

{% import "macros/ui.njk" as ui %}

2. Uso Básico

{{ ui.button(
  href="/caminho/destino/",
  text="Texto do Botão",
  variant="nav",
  icon="fa-solid fa-check",
  title="Texto de acessibilidade"
) }}

3. Parâmetros Disponíveis

href (obrigatório): URL de destino do link.
text (obrigatório): Texto visível no botão.
variant (opcional): Estilo do botão.
- 'nav': Arredondado (Padrão para menus).
- 'module': Retangular arredondado (Padrão para cards).
icon (opcional): Classe do ícone (ex: 'fa-solid fa-home').
title (opcional): Texto descritivo para acessibilidade (tooltip nativo).
class (opcional): Classes CSS adicionais para customização específica.

Configuração via Front Matter

Alguns layouts (como base.njk e module.njk) aceitam a configuração de um botão de topo na barra lateral através do Front Matter da página.

Exemplo: Botão "Voltar"

---
layout: layouts/base.njk
asideType: home
asideTopButton:
  href: "/docs/"
  text: "Voltar"
  icon: "fa-solid fa-arrow-left"
  variant: "nav"
  title: "Voltar para a documentação"
---