CODEWITHSUNDEEP
vue.jsvuetify.jsv-btn
EuberDeveloper
EuberDeveloper

Reputation: 1048

How to use lighten or darken colors as background of a v-btn in Vuetify?

I have a button like this on vuetify:

<v-btn color="blue" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

And the result is this:

enter image description here

Now I try to do this:

<v-btn class="blue lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

But the result is this:

enter image description here

While I was expecting just a lightened colour.

How can I achieve my goal? Note that here vuejs 2 is used.

Upvotes: 1

Views: 3482

Answers (2)

Adam Muse
Adam Muse

Reputation: 279

Add the color to your v-icon

<v-icon color="blue lighten4">

I'd avoid in-line stying it with blue--text

you can also use class="blue--text" for text

Upvotes: 2

EuberDeveloper
EuberDeveloper

Reputation: 1048

I solved it by writing this:

<v-btn color="blue--text text--lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

This is because the icon is considered as text and not as background

EDIT:

As @Adam Muse pointed out, a better solution could be adding the class on the <v-icon> tag:

<v-btn icon>
  <v-icon color="blue lighten-4">mdi-pencil</v-icon>
</v-btn>

Upvotes: 4

Related Questions