componentes / skeleton

Skeleton

Placeholder de carregamento com a forma do conteúdo: linhas de texto, título, avatar, retângulo ou card.

Como usar

Decorativo (`aria-hidden`), então use `aria-busy` no container enquanto carrega. O pulso para com `prefers-reduced-motion`. Redimensione com `width`/`height` ou `className`; `lines` desenha várias linhas de texto, a última menor.

preview

Skeleton.tsx

import { Skeleton } from "vaiperui";
 
<div aria-busy={loading}>
  <Skeleton variant="avatar" />
  <Skeleton variant="title" width="60%" />
  <Skeleton lines={3} />
</div>

Variantes

preview

text

title

avatar

rectangle

card

variantes.tsx

<Skeleton variant="text" />
<Skeleton variant="title" />
<Skeleton variant="avatar" />
<Skeleton variant="rectangle" />
<Skeleton variant="card" />

Linhas e estático

preview

lines={3}

animation="none"

linhas.tsx

<Skeleton lines={3} />
<Skeleton animation="none" variant="card" />

Props

Prop	Valores	Padrão	Descrição
variant	text \| title \| avatar \| rectangle \| card	text	Forma e tamanho padrão
lines	number	1	só text: número de linhas; a última de várias é menor
width / height	number \| string	por variante	Tamanho CSS (número é px)
radius	none \| sm \| md \| lg \| full	por variante	Substitui o arredondamento
animation	pulse \| none	pulse	O pulso desliga com prefers-reduced-motion
(nativas)	HTMLAttributes<HTMLDivElement>	nenhum	role (substitui o padrão), className, style, aria-*, ref etc.

Acessibilidade

Todo elemento é `aria-hidden="true"`, então leitores de tela ignoram o placeholder por completo.
Não tem role nem texto; não transmite nada por si só.
A animação de pulso usa `motion-reduce:animate-none`, então para com `prefers-reduced-motion`.
Passe `animation="none"` para renderizar um placeholder estático.

Tenha em mente

O Skeleton não define `aria-busy` nem anuncia nada: coloque `aria-busy` no container em carregamento você mesmo.
Se o usuário precisa saber que o carregamento começou ou terminou, anuncie numa região live sua (por exemplo um texto `role="status"` visualmente oculto).