Botão CSS

O que é

O botão é o exemplo mais direto da API D014: um único atributo, sw-btn, cujo VALOR (espaço-separado) escolhe cor, forma e tamanho — sw-btn="pri flat g" em vez de class="sw-btn-pri sw-btn-flat sw-btn-g".

Como funciona

CSS puro — não depende de nenhum módulo JS pra funcionar. O seletor [sw-btn~="pri"] lê um token do valor do atributo, o mesmo padrão usado em praticamente todo componente com variante de cor no framework.

Exemplos

<button sw-btn="pri">Primário</button>
<button sw-btn="sec">Secundário</button>
<button sw-btn="err">Erro</button>
<button sw-btn="drk">Noturno</button>
<button sw-btn="lit">Claro</button>

<!-- sem "flat", a cor já vem em degradê por padrão -->
<button sw-btn="pri">degradê</button>
<button sw-btn="pri flat">chapado — sem degradê, brilho nem sombra colorida</button>
<button sw-btn="pri out">contorno</button>
<button sw-btn="pri ghost">fantasma até o hover</button>

<button sw-btn="pri flat g pill">Combina todos os tokens que quiser</button>
<!-- escala completa: pp p m g gg xg -->

<!-- o efeito só aparece de verdade com conteúdo atrás
     (backdrop-filter desfoca o que está embaixo) -->
<div style="background:url('/foto.jpg') center/cover">
  <button sw-btn="glass pill g">Vidro</button>
</div>

<div sw-btn-grp>
  <button sw-btn="out sec">Dia</button>
  <button sw-btn="out sec">Semana</button>
</div>

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.