Buefy — Customize Tabs and Tags

Photo by Louie Martinez on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Tab Size

We can change the tab size with the size prop.

To do that, we write:

<template>
  <div id="app">
    <b-tabs size="is-small" class="block">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

is-small makes the tabs extra small. We can also set it to is-medium or is-large .

Types

We can change the shape of the tab with the type prop. For example, we can write:

<template>
  <div id="app">
    <b-tabs type="is-toggle">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

is-toggle changes it to a toggle button.

is-boxed is the default type which looks like tabs.