How to change the text color of a Vuetify button?
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.
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.