Componente

Botões

Estilos e modificadores para os botões do design system.

Button component

A classe .btn aplica o estilo base. Use os modificadores abaixo para criar variações:

Classe CSS	Descrição
`.btn`	`estilo base de todos os botões`
`.btn--primary`	`botão principal (call-to-action)`
`.btn--primary-subtle`	`variação sutil do primary`
`.btn--accent`	`destaque especial (ex.: ações destrutivas)`
`.btn--accent-subtle`	`variação sutil do accent`
`.btn--primary-outline`	`variação outline do primary`
`.btn--accent-outline`	`variação outline do accent`
`.btn--contrast`	`botão de alto contraste`
`.btn--subtle`	`estilo discreto, para ações secundárias`
`.btn--warning`	`estado de aviso`
`.btn--success`	`estado de sucesso`
`.btn--error`	`estado de erro`
`.btn--disabled`	`feedback visual de botão desabilitado`
`.btn--icon`	`botão contendo apenas um ícone`

Preview

Theme: Light

Theme: Dark

<ul class="flex flex-wrap gap-xs">
  <li><button class="btn">Basic</button></li>
  <li><button class="btn btn--primary">Primary</button></li>
  <li>
    <button class="btn btn--primary gap-3xs">
      <svg class="icon icon--xs" viewBox="0 0 16 16" aria-hidden="true">
        <!-- paths do ícone -->
      </svg>
      <span>Icon</span>
    </button>
  </li>
  <li><button class="btn btn--primary-subtle">Primary Subtle</button></li>
  <li><button class="btn btn--subtle">Subtle</button></li>
  <li><button class="btn btn--accent">Accent</button></li>
  <li><button class="btn btn--accent-subtle">Accent Subtle</button></li>
  <li><button class="btn btn--primary-outline">Primary Outline</button></li>
  <li><button class="btn btn--accent-outline">Accent Outline</button></li>
  <li><button class="btn btn--contrast">Contrast</button></li>
  <li><button class="btn btn--warning">Warning</button></li>
  <li><button class="btn btn--success">Success</button></li>
  <li><button class="btn btn--error">Error</button></li>
  <li><button class="btn btn--primary" disabled>Disabled</button></li>
</ul>

Temas

O sistema de cores do design system garante que os botões tenham boa aparência nos temas claro e escuro sem código adicional. Para sobrescrever estilos por tema, use o seletor [data-theme=dark]:

[data-theme=dark] .btn--primary {
  /* estilos específicos para o tema escuro */
}