CODEWITHSUNDEEP
vue.js
KodiakSA
KodiakSA

Reputation: 213

VuetifyJS vertical button text

I'd like to have text below the icon in a v-btn and can't seem to find how to do this. How is this possible?

Icon above the text

Upvotes: 5

Views: 3569

Answers (3)

botivegh
botivegh

Reputation: 500

To achieve this look with Vuetify, you just need to overwrite the flex direction in the v-btn__content class. Don't forget to give a unique class (for me flexcol) to your button so the style change won't affect other Vuetify buttons.

Vuetify 2:

<template>
<v-btn class="flexcol" icon height="100" width="100">
        <v-icon> mdi-tools </v-icon>
        <span> Tools </span>
</v-btn>
</template>


<style>
.flexcol .v-btn__content {
  flex-direction: column;
}
</style>

Vuetify 3:

Use the new stacked props of v-btn component.

Upvotes: 5

Mohit Gupta
Mohit Gupta

Reputation: 35

Try this

 <div class="d-flex flex-column align-center">
    <v-btn icon height="30">
      <v-icon>mdi-history</v-icon>
    </v-btn>
    <p class="mb-0">abc</p>
 </div>

Upvotes: 0

Roland
Roland

Reputation: 27719

You don't really need vuetify to do that.

You can just use css and flexbox.

Say you have:

<div class="wrapper"> 
 <div>Text Above</div>
 <div>Text Below</div>
</div>

You want the "Text Below" to stand below the "Text Above".You can do it like this: 

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

However click here to see your solution

Upvotes: 2

Related Questions