Ações

Botão

Primário em tinta, secundário com contorno, ghost, acento e só ícone, em três tamanhos.

só CSS

Exemplo

<button type="button" class="u-btn u-btn--primary">Salvar</button>
<button type="button" class="u-btn u-btn--secondary">Ver detalhes</button>
<button type="button" class="u-btn">Padrão</button>
<button type="button" class="u-btn u-btn--ghost">Cancelar</button>
<button type="button" class="u-btn u-btn--accent">Publicar</button>
<button type="button" class="u-btn u-btn--primary" disabled>Desativado</button>

Instalação

Botão vem no pacote completo, em unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Tamanhos

Pequeno tem 32px de altura, médio 40px e grande 48px. Em controle solto no celular, prefira o grande.

<button type="button" class="u-btn u-btn--primary u-btn--sm">Pequeno</button>
<button type="button" class="u-btn u-btn--primary">Médio</button>
<button type="button" class="u-btn u-btn--primary u-btn--lg">Grande</button>

Só ícone

Quadrado, com a mesma altura do tamanho escolhido. Sem texto visível, o aria-label é obrigatório.

<button type="button" class="u-btn u-btn--icon" aria-label="Adicionar"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button type="button" class="u-btn u-btn--primary u-btn--icon" aria-label="Continuar"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>
<button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Adicionar"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>

Classes e variantes

Classe	O que faz
`u-btn`	Base: altura 40px, fundo de azulejo e contorno leve.
`u-btn--primary`	Ação principal, em tinta. Não muda com o acento.
`u-btn--secondary`	Contorno, fundo transparente.
`u-btn--ghost`	Sem fundo nem contorno, texto secundário.
`u-btn--accent`	Fundo no acento atual.
`u-btn--sm`	32px de altura.
`u-btn--lg`	48px de altura.
`u-btn--icon`	Quadrado, só ícone.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
disabled	atributo nativo	Esmaece e bloqueia o ponteiro.
`aria-disabled="true"`	no botão ou link	Mesmo visual de desativado, sem tirar do foco.
`aria-label`	em `u-btn--icon`	Nome do botão quando não há texto.

Teclado

Tecla	Faz
Tab	foca o botão
Enter ou Espaço	aciona (botão nativo)