Recipeaction

Shimmer Button

Stable

Recipe 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-button

Preview

Default

Variants

Sizes

Disabled

Composition

Responsive

Interaction

Confirmações: 0

All states

Default

Variants

Sizes

Disabled

Composition

Responsive

Interaction

Confirmações: 0

Usage

@/components/ui/shimmer-button
import { ShimmerButton } from '@/components/ui/shimmer-button'
Shimmer Button
<ShimmerButton>Continuar</ShimmerButton>

Props

Props de ShimmerButton
PropTypeDefaultDescription
size"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | nullsem valor padrão
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | nullsem valor padrão
classNamestring | ((state: ButtonState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabledbooleanfalseWhether the button should be focusable when disabled.
nativeButtonbooleantrueWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof Button>. Aceita também os atributos padrão de um elemento React (285 não listados).

Metadata

Notas de acessibilidade

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.

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
URL
https://magicui.design/r/shimmer-button.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Button
Usado por
Nenhum ainda