Botão no SW Core — documentação e exemplos

O que é

É o botão do site: "Comprar", "Enviar", "Falar no WhatsApp", "Cancelar". Você coloca sw-btn em qualquer <button> ou <a> e ele ganha o visual do SW Core. Para mudar o jeito dele, você escreve palavras curtas dentro do atributo, separadas por espaço: uma palavra para a cor, outra para o estilo, outra para a forma, outra para o tamanho. A ordem não importa.

É só CSS — não precisa de JavaScript. Funciona no tema claro e no escuro sozinho, e as cores seguem as variáveis do seu site (se você trocar a cor primária, todos os botões pri mudam juntos).

Quando usar

Ação principal da tela (comprar, enviar, cadastrar): cor cheia — sw-btn="pri". Um só por área, para o olho saber onde clicar.
Ação secundária ao lado (voltar, ver mais, cancelar): contorno ou fantasma — sw-btn="out" / sw-btn="ghost".
Ação perigosa (excluir, cancelar pedido): vermelho — sw-btn="err".
Ícone sozinho (fechar, adicionar, menu): redondo — sw-btn="rnd" com um <i> dentro.
Sobre foto ou vídeo (topo de página, banner): vidro — sw-btn="glass".
Opções lado a lado (Dia / Semana / Mês): grupo colado — <div sw-btn-grp>.

Comece aqui

1
Coloque o SW Core no <head> da página (uma vez só, vale para todos os componentes). O segundo arquivo traz os ícones swi-*.
```
<link rel="stylesheet" href="swcore/swcore.min.css">
<link rel="stylesheet" href="swcore/swcore.compl.min.css">
```
2
Escreva o botão com sw-btn e a cor. Pronto.
```
<button sw-btn="pri">Quero meu site</button>
```
3
Quer mudar? Acrescente palavras no mesmo atributo. Aqui: cor primária + formato cápsula + tamanho grande + ícone.

Quero meu site
```
<a href="/contato" sw-btn="pri pill g">Quero meu site <i class="swi-right-arrow-alt"></i></a>
```

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Cores

Oito cores com nome de função. Sem nenhuma cor (sw-btn sozinho) ele fica neutro, na cor da superfície.

Neutro (sem cor) <button sw-btn>Neutro</button>

pri — primária (a do seu site) <button sw-btn="pri">Primário</button>

sec — secundária <button sw-btn="sec">Secundário</button>

suc — sucesso (verde) <button sw-btn="suc">Salvar</button>

ale — alerta (amarelo) <button sw-btn="ale">Atenção</button>

err — erro / perigo (vermelho) <button sw-btn="err">Excluir</button>

inf — informação (azul) <button sw-btn="inf">Saiba mais</button>

drk — escuro <button sw-btn="drk">Escuro</button>

lit — claro <button sw-btn="lit">Claro</button>

2. Estilos

O estilo muda o "peso" do botão. Sem palavra de estilo ele vem cheio, em degradê, com sombra na cor. Todo estilo combina com a cor: out err, ghost suc, flat inf…

Padrão — cheio em degradê <button sw-btn="pri">Padrão</button>

flat — cheio, cor chapada, sem sombra <button sw-btn="pri flat">Flat</button>

out — só o contorno <button sw-btn="pri out">Contorno</button>

ghost — fundo leve, sem borda <button sw-btn="pri ghost">Fantasma</button>

out + cor <button sw-btn="err out">Cancelar</button>

ghost + cor <button sw-btn="suc ghost">Confirmar</button>

flat + cor <button sw-btn="inf flat">Detalhes</button>

flat + escuro <button sw-btn="drk flat">Discreto</button>

3. Vidro (glass)

Efeito de vidro fosco: desfoca o que está atrás. Só aparece sobre foto, vídeo ou fundo colorido — em fundo liso ele fica quase invisível. O fundo colorido destes quadros representa a sua foto. Ele acompanha o tema: no tema escuro o texto é claro (para foto escura); no tema claro o texto é escuro (para foto clara) — troque o tema no botão ao lado e veja.

glass — vidro incolor <button sw-btn="glass">Vidro</button>

glass + pri — vidro com tom da cor <button sw-btn="glass pri">Primário</button>

glass + drk — vidro escuro <button sw-btn="glass drk">Escuro</button>

glass + lit — vidro claro <button sw-btn="glass lit">Claro</button>

4. Formas

Sem palavra de forma, o canto é levemente arredondado.

Padrão — canto discreto <button sw-btn="pri">Padrão</button>

pill — cápsula (bem redondo nas pontas) <button sw-btn="pri pill">Cápsula</button>

sqr — quadrado, canto reto <button sw-btn="pri sqr">Reto</button>

rnd — círculo, para ícone sozinho <button sw-btn="pri rnd" aria-label="Adicionar"><i class="swi-plus"></i></button>

5. Tamanhos

Seis tamanhos, do menor ao maior. Sem palavra de tamanho ele fica no m (médio).

pp — bem pequeno <button sw-btn="pri pp">Bem pequeno</button>

p — pequeno <button sw-btn="pri p">Pequeno</button>

m — médio (padrão) <button sw-btn="pri m">Médio</button>

g — grande <button sw-btn="pri g">Grande</button>

gg — muito grande <button sw-btn="pri gg">Muito grande</button>

xg — extra grande <button sw-btn="pri xg">Extra</button>

6. Com ícone

Coloque um <i class="swi-…"> dentro do botão, antes ou depois do texto. O espaço entre ícone e texto já vem certo.

Ícone antes <button sw-btn="suc"><i class="swi-cart-add"></i> Comprar</button>

Ícone depois <button sw-btn="pri">Continuar <i class="swi-right-arrow-alt"></i></button>

Só ícone, redondo <button sw-btn="err rnd" aria-label="Excluir"><i class="swi-trash"></i></button>

Só ícone, redondo pequeno <button sw-btn="ghost rnd pp" aria-label="Fechar"><i class="swi-x"></i></button>

7. Estados

Mostram o que está acontecendo com o botão.

loading — carregando (gira e não aceita clique) <button sw-btn="pri loading">Enviando</button>

active — marcado / selecionado <button sw-btn="sec active">Selecionado</button>

disabled — desativado (atributo do HTML) <button sw-btn="pri" disabled>Indisponível</button>

8. Grupo colado

Coloque vários botões dentro de <div sw-btn-grp> e eles viram uma peça só, com os cantos de dentro retos.

sw-btn-grp com contorno

<div sw-btn-grp>
  <button sw-btn="out sec">Dia</button>
  <button sw-btn="out sec active">Semana</button>
  <button sw-btn="out sec">Mês</button>
</div>

sw-btn-grp com ícones

<div sw-btn-grp>
  <button sw-btn="drk flat" aria-label="Negrito"><i class="swi-bold"></i></button>
  <button sw-btn="drk flat" aria-label="Itálico"><i class="swi-italic"></i></button>
  <button sw-btn="drk flat" aria-label="Sublinhado"><i class="swi-underline"></i></button>
</div>

Tabela de opções

Palavra	O que faz	Exemplo
Cor
`pri`	Cor primária do seu site. Use na ação principal.	`sw-btn="pri"`
`sec`	Cor secundária.	`sw-btn="sec"`
`suc`	Verde de sucesso: salvar, confirmar, comprar.	`sw-btn="suc"`
`ale`	Amarelo de alerta.	`sw-btn="ale"`
`err`	Vermelho de erro/perigo: excluir, cancelar.	`sw-btn="err"`
`inf`	Azul de informação.	`sw-btn="inf"`
`drk`	Escuro.	`sw-btn="drk"`
`lit`	Claro.	`sw-btn="lit"`
Estilo
`(nenhum)`	Cheio, em degradê, com sombra na cor.	`sw-btn="pri"`
`flat`	Cheio com a cor chapada, sem degradê e sem sombra.	`sw-btn="pri flat"`
`out`	Só o contorno, fundo transparente.	`sw-btn="pri out"`
`ghost`	Fundo leve na cor do texto, sem borda.	`sw-btn="pri ghost"`
`glass`	Vidro fosco — para usar sobre foto ou vídeo.	`sw-btn="glass"`
Forma
`(nenhuma)`	Canto levemente arredondado.
`pill`	Cápsula.	`sw-btn="pri pill"`
`sqr`	Canto reto.	`sw-btn="pri sqr"`
`rnd`	Círculo — para botão só com ícone. Coloque `aria-label` dizendo o que ele faz.	`sw-btn="rnd"`
Tamanho
`pp`	Bem pequeno (28 px de altura).	`sw-btn="pri pp"`
`p`	Pequeno (36 px).	`sw-btn="pri p"`
`m`	Médio — é o padrão (44 px).	`sw-btn="pri m"`
`g`	Grande (50 px).	`sw-btn="pri g"`
`gg`	Muito grande (56 px).	`sw-btn="pri gg"`
`xg`	Extra grande (64 px).	`sw-btn="pri xg"`
Estado
`loading`	Mostra o carregando girando e bloqueia o clique.	`sw-btn="pri loading"`
`active`	Marcado/selecionado (ex.: opção escolhida num grupo).	`sw-btn="sec active"`
`disabled`	Desativado. É atributo normal do HTML, fora do sw-btn.	`<button sw-btn="pri" disabled>`
Grupo
`sw-btn-grp`	Atributo na `<div>` que envolve os botões: cola todos numa peça só.	`<div sw-btn-grp>…</div>`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Chamada principal + secundária (topo de página) Ao vivo

Quero meu site Ver trabalhos

<a href="/contato" sw-btn="pri pill g">Quero meu site <i class="swi-right-arrow-alt"></i></a>
<a href="/portfolio" sw-btn="out pill g">Ver trabalhos</a>

Rodapé de formulário: salvar e cancelar Ao vivo

<button type="button" sw-btn="ghost sec">Cancelar</button>
<button type="submit" sw-btn="suc"><i class="swi-save"></i> Salvar</button>

Confirmar exclusão Ao vivo

<button sw-btn="out sec">Manter</button>
<button sw-btn="err"><i class="swi-trash"></i> Excluir de vez</button>

Botão sobre foto (banner) Ao vivo

Agendar visita Ver fotos

<section class="banner"> <!-- sua foto de fundo no CSS da página -->
  <a href="/agendar" sw-btn="glass pill g">Agendar visita</a>
  <a href="/fotos" sw-btn="glass lit pill g">Ver fotos</a>
</section>

Enviando: trocar para "carregando" ao clicar Ao vivo

<button sw-btn="pri" id="enviar">Enviar</button>

<script>
  const btn = document.getElementById('enviar');
  btn.addEventListener('click', async () => {
    btn.setAttribute('sw-btn', 'pri loading');   // liga o carregando
    await fetch('/enviar', { method: 'POST' });
    btn.setAttribute('sw-btn', 'pri');           // volta ao normal
  });
</script>

Barra de ações com ícones redondos Ao vivo

<button sw-btn="ghost rnd" aria-label="Editar"><i class="swi-edit"></i></button>
<button sw-btn="ghost rnd" aria-label="Compartilhar"><i class="swi-share-alt"></i></button>
<button sw-btn="ghost err rnd" aria-label="Excluir"><i class="swi-trash"></i></button>

Precisa de quê

swcore.min.css — o botão.
swcore.compl.min.css — só se usar ícone swi-* dentro dele.

Cuidados — erros comuns

Escrever class="sw-btn-pri" não funciona. O certo é o atributo com a palavra dentro: sw-btn="pri".
Botão só com ícone precisa de aria-label="…", senão quem usa leitor de tela não sabe o que ele faz.
Para desativar, use o atributo disabled do HTML. Em link (<a>) o disabled não existe — troque por <button>.
glass em fundo liso fica quase invisível: ele precisa de foto, vídeo ou cor atrás.
No tema claro o glass tem texto escuro. Se o seu site é claro mas a foto do topo é escura, use glass lit (vidro branco, texto escuro) ou glass drk (vidro escuro, texto branco) — os dois leem bem em qualquer foto.
Uma palavra de cada grupo basta. Duas cores juntas (pri err) ou dois tamanhos (p g) brigam entre si — fica valendo a que vier por último no CSS, não a que você escreveu por último.
Não coloque três botões de cor cheia lado a lado: um cheio (ação principal) e os outros em out ou ghost.

O que ele não faz

out e ghost existem nas cores pri sec suc ale err inf; com drk e lit eles ficam na cor primária.
flat não muda o lit (ele já é quase chapado).

Botão CSS