Index Level Animated

Same anatomy as Index Level, but colored by specialty and with a ring that sweeps once when the component appears.

Two things differ from IndexLevel:

No variant. The colors come from the specialty prop instead.
The ring. Prioritário and Alta prevalência sit on a card background with a 2px ring 4px outside the chip. The ring’s gradient sweeps a full turn on mount and then settles at 10% opacity. Média prevalência and Baixa prevalência have no ring — they carry the specialty’s soft background instead.

Specialty	Text	Ring	Soft background (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 is case-insensitive — "cm" and "CM" both work.

Examples

Replay

The sweep runs on mount, so it plays whenever the chip enters the tree. To replay it, remount the component (e.g. by changing its key).

Preview

PrioritárioPrioritárioPrioritárioPrioritárioPrioritárioPrioritário

Default

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

CM

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

GO

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

CIR

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

PED

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

PREV

Preview

PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência

Sizes

Preview

Alta prevalênciaAlta prevalênciaMédia prevalênciaMédia prevalência

Short name

Preview

PrioritárioAltaMédiaBaixa

Without the animation

animated={false} renders the settled state (the Figma Step=2), useful for lists where a sweep on every row would be noisy. The sweep is also skipped automatically when the user has prefers-reduced-motion enabled.

Preview

PrioritárioAlta prevalência

Extra content and customization

Preview

Alta

· 12 aulas

Prioridade máximaBaixa prevalência

API

Property	Type	Possible values	Default	Description
level	string	”p”, “h”, “m”, “l”	-	Required. Priority level, matching the `PriorityLevelType` enum values.
specialty	string	”default”, “cm”, “go”, “cir”, “ped”, “prev” (also accepted uppercase)	“default”	Specialty driving the text, ring and soft background colors.
size	string	”sm”, “md"	"md”	Sets the icon size, typography and paddings.
animated	boolean	true, false	true	Plays the ring sweep on mount. When `false`, the ring renders already settled at 10% opacity.
shortName	boolean	true, false	false	Uses the abbreviated label (“Alta”) instead of the full one (“Alta prevalência”).
label	React.ReactNode	-	-	Overrides the label derived from `level`.
hideLabel	boolean	true, false	false	Hides the label, keeping only the icon (and any `children`).
children	React.ReactNode	-	-	Extra content rendered after the label.
iconClassName	string	-	-	Additional CSS classes applied to the icon slot.
labelClassName	string	-	-	Additional CSS classes applied to the label slot.
ringClassName	string	-	-	Additional CSS classes applied to the ring slot.
className	string	-	-	Additional CSS classes to apply to the root element.
asChild	boolean	true, false	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
…props	All native `span` props	-	-	Allows passing any other standard properties of a `span` element.

Last updated on July 30, 2026

Index Level Input