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