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?

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.

Answer 2

If you are using vuetify you may seems like to apply this as a standard color:

import Vue from "vue"; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css";      Vue.use(Vuetify);      export default new Vuetify({   theme: {     themes: {       light: {         primary: "#14C6FF",         secondary: "#424242",         accent: "#82B1FF",         error: "#FF5252",         info: "#2196F3",         success: "#4CAF50",         warning: "#FFC107",         lightblue: "#14c6FF",         yellow: "#FFCF00",         pink: "#FF1976",         orange: "#FF8657",         magenta: "#C33AFC",         darkblue: "#1E2D56",         gray: "#909090",         neutralgray: "#9BA6C1",         green: "#2ED47A",         red: "#FF5c4E",         darkblueshade: "#308DC2",         lightgray: "#BDBDBD",         lightpink: "#FFCFE3",         white: "#FFFFFF"       }     }   } }); 

and can be easily access using color="lightpink" prop or whatever you like.