Skip to content

StepperIndicator ​

Source: client/lib/theme/vueda-tailwind/shell/index.js

The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.

Vue component: StepperIndicator

SlotDefault classesDescription
root4 classesThe circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.

root ​

The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.

Default classes:

text
inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8
group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50
group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground
group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground

Source: client/lib/theme/vueda-tailwind/shell/StepperIndicator.theme.js:18