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?

score 140 · Accepted Answer · answered Sep 10 '18 at 13:29

140

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.

answered Sep 10 '18 at 13:29

Traxo

18,464
4
75
87

1

ah, got it. How about if I want to use a random color like "#1976D2"? Do I need to make it a primary/secondary or something like that first? – nachocab Sep 10 '18 at 13:34
1

@nachocab Yes I believe that is the proper way thus far. However you might not want to use "random" colors but instead try to use what is already available to you by framework if possible: https://github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/_colors.styl – Traxo Sep 10 '18 at 13:36
Right. That makes sense. I was just wondering how I would change another property, like font-family or something like that. I don't think they have specific classes for every possible value – nachocab Sep 10 '18 at 13:38
1

You are in for a [surprise](https://vuetifyjs.com/en/style/typography) :) Not a font-family but surely a lot of options. – Traxo Sep 10 '18 at 13:39
Updated link https://vuetifyjs.com/en/styles/colors/#classes. I found this answer very helpful. – Jeff Bluemel Jul 31 '20 at 15:30
Can this be combined with `darken-x` and `lighten-x` classes? – dotNET Dec 11 '21 at 16:11
1

@dotNET Yes, for example add `text--darken-4` – Traxo Dec 13 '21 at 15:37

score 10 · Answer 2 · edited Nov 16 '20 at 14:34

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.

This is the best way to deal with common theme contents – Kaushik Thanki Feb 19 '21 at 09:56 — Kaushik Thanki, Feb 19 '21 at 09:56

score 1 · Answer 3 · answered Dec 26 '21 at 17:33

You can change the color of the text entered in the span existing in the button. In this way:

v-btn {
border-radius: 8px !important;
border-color: red !important;
color: red  !important;
background-color: red !important;
text-decoration: none !important;
max-width: auto;
font-size-adjust: auto;
margin: 1px;
&:hover {
    background-color: blue !important;
    color: blue !important;
    text-decoration-color: blue !important;
    border-color: blue !important;
    margin: 1px;
    span {
        color: white !important;
    }
}

}

score 0 · Answer 4 · answered Mar 22 '23 at 17:55

Using VueJs 3 and Vuetify 3, the classes --text didn't work for me but the following worked fine:

<v-btn 
    color  = "light-blue-lighten-3"
    @click = "isSnackBar03Open = true">

    <span class = "text-white">
        Open 03
    </span>

</v-btn>

This one worked too:

<v-btn 
    color  = "light-blue-lighten-3"
    class  = "text-white"
    @click = "isSnackBar03Open = true">

    <span>
        Open 03
    </span>

</v-btn>

How to change the text color of a Vuetify button?

4 Answers4