vuetify.js - How to change the text color of a Vuetify button?

Question

Maybe I'm missing something obvious, but I can't figure out the proper way to change the text color in a v-btn. This works, but having to use !important doesn't seem ideal:

.v-btn
  color: red !important

The color prop is only for the background color, as far as I'm aware. And I guess I could change the theme primary/secondary when calling Vue.use(Vuetify, { theme: {...}} ), but what if I want to override a single component?

question from:https://stackoverflow.com/questions/52258669/how-to-change-the-text-color-of-a-vuetify-button

Answer 1

There are css classes for coloring text anywhere in vuetify, just append --text to a color.
So for example

<v-btn class="red--text">

It should work with colors defined in your theme as well e.g. primary--text and similar.
Note that this is not specific to a v-btn, class should work anywhere.