Index Level Animated

Mesma anatomia do Index Level, mas com cores por especialidade e um anel que gira duas vezes quando o componente aparece.

Duas coisas mudam em relação ao IndexLevel:

• Sem variant. As cores vêm da prop specialty.
• O anel. Prioritário e Alta prevalência ficam sobre um fundo de card, com um anel de 2px a 4px do lado de fora do chip. O gradiente do anel dá duas voltas completas na montagem (1,2s cada, 2,4s no total) e, no mesmo tempo, assenta em 10% de opacidade. Média prevalência e Baixa prevalência não têm anel: usam o fundo soft da especialidade.

Especialidade	Texto	Anel	Fundo soft (sm / md)
default	primary-foreground	primary-background-fill	gray-background-soft-muted
cm	cm-foreground	cm-background-fill	cm-background-soft / cm-background-soft-emphasis
go	go-foreground	go-background-fill	go-background-soft / go-background-soft-emphasis
cir	cir-foreground	cir-background-fill	cir-background-soft / cir-background-soft-emphasis
ped	ped-foreground	ped-background-fill	ped-background-soft / ped-background-soft-emphasis
prev	prev-foreground	prev-background-fill	prev-background-soft / prev-background-soft-emphasis

specialty não diferencia maiúsculas de minúsculas: "cm" e "CM" funcionam.

Exemplos

Repetir a animação

O giro roda na montagem, então toca sempre que o chip entra na árvore. Para repetir, remonte o componente (por exemplo, mudando a key).

Padrão

CM

GO

CIR

PED

PREV

Tamanhos

Nome curto

Sem a animação

animated={false} renderiza o estado final (o Step=2 do Figma), útil em listas onde um giro em cada linha poluiria a tela. O giro também é pulado automaticamente quando o usuário tem prefers-reduced-motion ativado.

Conteúdo extra e personalização

API

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
level	string	"p", "h", "m", "l"	-	Obrigatório. Nível de prioridade, igual aos valores do enum PriorityLevelType.
specialty	string	"default", "cm", "go", "cir", "ped", "prev" (também aceita maiúsculas)	"default"	Especialidade que define as cores do texto, do anel e do fundo soft.
size	string	"sm", "md"	"md"	Define o tamanho do ícone, a tipografia e os paddings.
animated	boolean	true, false	true	Toca o giro do anel na montagem. Quando false, o anel já aparece no estado final, com 10% de opacidade.
shortName	boolean	true, false	false	Usa o label abreviado ("Alta") em vez do completo ("Alta prevalência").
label	React.ReactNode	-	-	Substitui o label derivado de level.
hideLabel	boolean	true, false	false	Oculta o label e mantém só o ícone (e eventuais children).
children	React.ReactNode	-	-	Conteúdo extra renderizado depois do label.
iconClassName	string	-	-	Classes CSS adicionais aplicadas ao slot do ícone.
labelClassName	string	-	-	Classes CSS adicionais aplicadas ao slot do label.
ringClassName	string	-	-	Classes CSS adicionais aplicadas ao slot do anel.
className	string	-	-	Classes CSS adicionais aplicadas ao elemento raiz.
asChild	boolean	true, false	false	Troca o elemento renderizado por padrão pelo elemento filho, mesclando props e comportamento.
...props	Todas as props nativas de span	-	-	Permite passar qualquer outra propriedade padrão de um elemento span.