54

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?

4 Answers 4

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.

7
  • 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, 2018 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: github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/…
    – Traxo
    Sep 10, 2018 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, 2018 at 13:38
  • 1
    You are in for a surprise :) Not a font-family but surely a lot of options.
    – Traxo
    Sep 10, 2018 at 13:39
  • 1
    @dotNET Yes, for example add text--darken-4
    – Traxo
    Dec 13, 2021 at 15:37
9

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.

1
  • This is the best way to deal with common theme contents Feb 19, 2021 at 9:56
1

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;
    }
}

}

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.