Shimmer Button
StableRecipe do Button oficial com uma luz que percorre o perímetro, confinada à borda por máscara. Preserva variantes semânticas, tamanhos, composição e comportamento do primitive; cores, raio herdado e ritmo vêm da Foundation.
Instalação
npx up-web-ds add shimmer-buttonPreview
Default
Variants
Sizes
Disabled
Composition
Responsive
Interaction
All states
Default
Variants
Sizes
Disabled
Composition
Responsive
Interaction
Metadata
Classificação
- Layer
- Recipe
- Domínio
- Domain-free (compartilhado)
- Categoria
- action
- Status
- Stable
Origem e distribuição
- Fonte
- Derived from magic / shimmer-button
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Verificado em tests/e2e/shimmer-button.spec.ts no Chromium desktop e mobile, em light e dark. Tab e Shift+Tab pulam disabled; Enter e Space acionam uma vez; o foco visível do Button permanece. Revisão de leitor de tela pela árvore de acessibilidade do navegador: papel button, nome único e estado disabled, inclusive no exemplo com ícone composto; o pseudo-elemento decorativo não acrescenta conteúdo anunciado. Axe sem violações WCAG 2.2 AA nos exemplos. Toque real emulado aciona a ação e os alvos medidos atendem ao mínimo de 24×24 CSS px; o exemplo responsivo cabe em 320px. A máscara preserva o conteúdo e não intercepta eventos. Em reduced motion o shimmer desaparece e as transições herdadas caem para 1ms. Não há ícones estruturais: o ícone do exemplo é composição do consumidor. Testes unitários cobrem ref, props, formulário, render polimórfico e disabled.
Dependências
- Pacotes
- Nenhuma
- Ícones
- Nenhum
- Construído sobre
- Button
- Usado por
- Nenhum ainda