How to make 2 buttons with different text lenght having same width in vuetify?

Question

Here, I am using vuetifyjs to create buttons and I have set my size of button large. I can see change in button size but all I could see is that all my buttons are of different size. I want to have all my buttons to be of same height and width which is same size for all buttons. Please can anyone help me with that.

Here is my code:

<template>

<div class="text-center">
    <v-btn 
       dark large
       min-width: 0;
      class="ma-2"

      color="red"
    >
      Red
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="pink"

    >
      Pink
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="purple"

    >
      Purple
    </v-btn>

       <v-btn
       dark large
      class="ma-2"

      color="light-blue"

    >
      Light-Blue
    </v-btn>

    <v-btn
    dark large
      class="ma-2"

      color="brown"

    >
      Brown
    </v-btn> <br/>

    <v-btn
    dark large
      class="ma-2"

      color="orange"

    >
      Orange
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="green"

    >
      Green
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="teal"

    >
      Teal
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="yellow"

    >
      Yellow
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="cyan"

    >
      Cyan
    </v-btn><br/>

        <v-btn
        dark large
      class="ma-2"

      color="amber"

    >
      Amber
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="lime"

    >
      Lime
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="grey"

    >
      Grey
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="blue-grey"

    >
      Blue-Grey
    </v-btn>


 <v-btn     
 dark large

class="ma-2 white--text"
  color="black"
  >

  Black
</v-btn>


</div>


</template> 

Answer 1

You can set the width of the button using styles but, also need to set the width of the label slot so that it fits well into the button. I have set width for the button, and also for the span that hold the button-text EG:

<v-btn dark large color="red" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Red</span>
</v-btn>
<v-btn dark large color="pink" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Pink</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="light-blue" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Light Blue</span>
</v-btn>
<v-btn dark large color="brown" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Brown</span>
</v-btn>
<v-btn dark large color="orange" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Orange</span>
</v-btn>
<v-btn dark large color="green" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Green</span>
</v-btn>
<v-btn dark large color="teal" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Teal</span>
</v-btn>
<v-btn dark large color="yellow" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Yellow</span>
</v-btn>
<v-btn dark large color="cyan" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Cyan</span>
</v-btn>
<v-btn dark large color="amber" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Amber</span>
</v-btn>
<v-btn dark large color="lime" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Lime</span>
</v-btn>
<v-btn dark large color="grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Grey</span>
</v-btn>
<v-btn dark large color="blue-grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Blue-Grey</span>
</v-btn>
<v-btn dark large color="black" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Black</span>
</v-btn>