CODEWITHSUNDEEP
javascriptcssvuetify.js
Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22744

Vuetify: how to modify the step's default color?

I am using the Vuetify's Stepper component.

By default, the step's color is blue:

enter image description here

Corresponding piece of code is:

<v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>

Live test on Codepen.

Upvotes: 0

Views: 5191

Answers (2)

Traxo
Traxo

Reputation: 19002

You can simply pass a color to color attribute on v-stepper-step component.

<v-stepper-step color="red">Step 1</v-stepper-step>

Custom theme colors e.g. color="success" will work as well.

Upvotes: 6

elasticman
elasticman

Reputation: 641

You can overwrite the default color with CSS. The element is v-stepper__step__step .primary :

.v-stepper__step__step.primary {
    background-color: red !important;
    border-color: red !important;
}

enter image description here

Upvotes: 1

Related Questions