CODEWITHSUNDEEP
vuetify.js
nachocab
nachocab

Reputation: 14444

How to change the text color of a Vuetify button?

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?

Upvotes: 61

Views: 166092

Answers (4)

Nathan Maia
Nathan Maia

Reputation: 61

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

Upvotes: 1

Jelgab
Jelgab

Reputation: 1910

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>

Upvotes: 2

Joshua Galit
Joshua Galit

Reputation: 1466

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.

Upvotes: 13

Traxo
Traxo

Reputation: 19022

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.

Upvotes: 145

Related Questions