Vuetify — Button Groups

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Button Groups

The v-btn-toggle component is a wrapper for v-item-group that works with v-btn components.

We can use it to add a group of buttons that can be toggled.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card flat class="py-12">
          <v-card-text>
            <v-row align="center" justify="center">
              <v-btn-toggle v-model="toggle" rounded>
                <v-btn>
                  <v-icon>mdi-format-align-left</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-center</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-right</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-justify</v-icon>
                </v-btn>
              </v-btn-toggle>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    toggle: undefined,
  }),
};
</script>

to add a button group with the v-btn-toggle component.

We just put the v-btn components inside the group.

The rounded prop makes the button group round.

Mandatory Button Groups

The mandatory prop makes the v-btn-toggle always has a value.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card flat class="py-12">
          <v-card-text>
            <v-row align="center" justify="center">

            <v-btn-toggle v-model="toggle" multiple>
                <v-btn>
                  <v-icon>mdi-format-align-left</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-center</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-right</v-icon>
                </v-btn>
                <v-btn>
                  <v-icon>mdi-format-align-justify</v-icon>
                </v-btn>
              </v-btn-toggle>

              <v-col cols="12" class="text-center">{{ toggle }}</v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    toggle: []
  }),
};
</script>

The multiple prop lets us make multiple selections.

When we click on a button, the index of it will be added to the state.

Buttons in a Toolbar

We can add buttons to the v-toolbar .

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-toolbar dense>
          <v-overflow-btn :items="dropdownFont" label="Select font" hide-details class="pa-0"></v-overflow-btn>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-divider vertical></v-divider>
            <v-overflow-btn
              :items="dropdownEdit"
              editable
              label="Select size"
              hide-details
              class="pa-0"
              overflow
            ></v-overflow-btn>
            <v-divider vertical></v-divider>
            <v-spacer></v-spacer>
            <v-btn-toggle v-model="toggleMultiple" color="primary" dense group multiple>
              <v-btn :value="1" text>
                <v-icon>mdi-format-bold</v-icon>
              </v-btn>
              <v-btn :value="2" text>
                <v-icon>mdi-format-italic</v-icon>
              </v-btn>
              <v-btn :value="3" text>
                <v-icon>mdi-format-underline</v-icon>
              </v-btn>
            </v-btn-toggle>
            <div class="mx-4"></div>
            <v-btn-toggle v-model="toggleExclusive" color="primary" dense group>
              <v-btn :value="1" text>
                <v-icon>mdi-format-align-left</v-icon>
              </v-btn>
              <v-btn :value="2" text>
                <v-icon>mdi-format-align-center</v-icon>
              </v-btn>
              <v-btn :value="3" text>
                <v-icon>mdi-format-align-right</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dropdownFont: [
      { text: "Arial" },
      { text: "Calibri" },
      { text: "Courier" },
      { text: "Verdana" },
    ],
    dropdownEdit: [
      { text: "100%" },
      { text: "75%" },
      { text: "50%" },
      { text: "25%" },
      { text: "0%" },
    ],
    toggleExclusive: 2,
    toggleMultiple: [1, 2, 3],
  }),
};
</script>

We have the v-toolbar with the v-overflow-btn components to add the dropdowns.

And we add the v-divider to add the dividers to our toolbar.

v-btn-toggle lets us add the button toggles.

Also, we added the dense prop to make the toolbar smaller.

Conclusion

We can add button groups to toolbars and more with Vuetify.