Botão [sw-btn]
O "Framework Button" do SW: variantes de cor, tamanho, forma e estados com estética premium e feedback tátil.
1. Cores Semânticas
Variantes de cor baseadas no sistema de tokens do SW.
[sw-btn]
.sw-btn-pri
.sw-btn-sec
.sw-btn-suc
.sw-btn-ale
.sw-btn-err
.sw-btn-inf
.sw-btn-drk
.sw-btn-lit
2. Outline Style
3. Ghost Style
4. Glass / Espelhados Style (.sw-btn-gls)
Estilo de vidro translúcido com efeito de desfoque (Glassmorphism) e bordas suaves.
4. Tamanhos & Formas
5. Botões Agrupados
Ótimo para paginações ou toolbars contínuas ([sw-btn-grp]).
6. Estados & Feedback
Tabela de Classes
| Prefixo/Classe | Tipo | Descrição |
|---|---|---|
[sw-btn] |
Base | Atributo fundamental para aplicar o estilo base do botão. |
.sw-btn-pri, .sw-btn-sec, .sw-btn-suc, .sw-btn-ale, .sw-btn-err, .sw-btn-inf
|
Cor | Variantes semânticas: Primary, Secondary, Success, Alert, Error, Info. |
.sw-btn-out |
Estilo | Outline: borda colorida com fundo transparente. Combina com variantes de cor. |
.sw-btn-gst |
Estilo | Ghost: sem borda, apenas texto colorido. Combina com variantes de cor. |
.sw-btn-gls |
Estilo | Glass: fundo com efeito de vidro (blur/transparência). |
.sw-btn-pp, .sw-btn-p, .sw-btn-m, .sw-btn-g, .sw-btn-gg, .sw-btn-xg |
Tamanho | Escala em t-shirt: PP ? XG. Padrão sem classe equivale a M. |
.sw-btn-pil |
Forma | Pill: totalmente arredondado. |
.sw-btn-sqr |
Forma | Square: sem border-radius (quadrado). |
.sw-btn-rnd |
Forma | Round: circular - ideal para botões de ícone. |
[sw-btn-grp] |
Agrupamento | Container que une botões filhos removendo o raio entre eles. Ideal para paginações e toolbars. |
.sw-btn-ldr |
Estado | Aplica animação de spinner e bloqueia interação. |
.sw-btn-act |
Estado | Marca o botão como ativo/selecionado (ex: tab ativa, filtro ativo). |
.sw-btn-dis |
Estado | Desabilita visualmente via classe (alternativa ao atributo disabled).
|