Buefy Vue UI Components

Buefy

Buefy is a lightweight UI component library for Vue 3 based on Bulma CSS. Components are Vue SFCs (<b-button>, <b-modal>, etc.) that wrap Bulma's class-based styles with reactive props, events, and slots.

When to run this skill

Trigger whenever you are:

• Writing a Vue template or SFC that includes any UI element (buttons, forms, modals, tables, navigation, etc.)
• Asked to "use Buefy" or "add a Buefy component"
• Working in a project that has buefy in its package.json dependencies
• Generating component code without a specified UI library in a Vue project

Install

npm install buefy

Full bundle (registers all components globally)

// main.ts
import { createApp } from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import App from './App.vue'

const app = createApp(App)
app.use(Buefy)
app.mount('#app')

Individual components (tree-shakeable)

// main.ts — register as plugins
import { createApp } from 'vue'
import { Button, Field, Input } from 'buefy'
import App from './App.vue'

const app = createApp(App)
app.use(Button)
app.use(Field)
app.use(Input)
app.mount('#app')

<!-- Or import directly in a SFC -->
<script lang="ts">
import { BButton, BField, BInput } from 'buefy'
export default { components: { BButton, BField, BInput } }
</script>

Usage rules

1. Use the type prop, not class — Buefy components expose Bulma modifiers as a type prop. Use type="is-primary" not class="is-primary" on Buefy components.
2. Size prop values — "is-small" | "is-medium" | "is-large". No bare size strings.
3. Always wrap form inputs in <b-field> — <b-field> provides the label, validation message, and grouping. Direct bare inputs miss label/message wiring.
4. v-model target — Most components bind to modelValue. Named v-models on b-table: v-model:selected, v-model:checked-rows, v-model:current-page, v-model:opened-detailed.
5. Icons — Use the icon prop with the icon name only (no mdi- prefix). The icon pack (MDI by default) must be registered in your project. Example: icon="home" not icon="mdi-home".
6. b-table columns — <b-table> requires :data="arrayOfObjects" and <b-table-column field="key" label="Header"> children. Columns can also be passed via the :columns prop.
7. Theming — Customize via Bulma SCSS variable overrides in a .scss file, not a JS config object. The ConfigProgrammatic utility sets defaults (icon pack, locale, etc.).
8. Programmatic APIs — Components like Toast, Snackbar, Dialog, Loading, Modal, and Notification can be opened imperatively. Import the programmatic class or use the composable:

   import { ToastProgrammatic as Toast } from 'buefy'
   Toast.open('Hello world')
   // or with options:
   Toast.open({ message: 'Saved!', type: 'is-success', duration: 3000 })
   
   // Composable-style (preferred in Composition API):
   import { useToast } from 'buefy'
   const { open: openToast } = useToast()
   openToast({ message: 'Saved!', type: 'is-success' })

Colors & Types

Use these values for the type prop on components that accept it:

Size values: is-small · is-medium · is-large

Components

b-autocomplete

Autocomplete text input with dropdown suggestions.

Key props: v-model (String), data (Array — suggestion list), field (String — dot path into data objects for display), expanded, loading, icon, size, rounded, keep-first, open-on-focus, keep-open, clearable, placeholder

Slots: default (scoped: { option, index }) for custom option rendering; header, footer, empty, group

Emits: typing, select, focus, blur, infinite-scroll

<b-field label="Search">
  <b-autocomplete
    v-model="search"
    :data="filteredResults"
    field="name"
    placeholder="Type to search"
    @typing="onTyping"
    @select="onSelect"
  >
    <template #default="{ option }">
      {{ option.name }} — {{ option.category }}
    </template>
  </b-autocomplete>
</b-field>

b-breadcrumb

Breadcrumb navigation trail.

Key props: align ("is-left" | "is-centered" | "is-right"), separator ("has-arrow-separator" | "has-bullet-separator" | "has-dot-separator" | "has-succeeds-separator"), size

Slots: default — place <b-breadcrumb-item> children

<b-breadcrumb>
  <b-breadcrumb-item tag="router-link" to="/">Home</b-breadcrumb-item>
  <b-breadcrumb-item tag="router-link" to="/docs">Docs</b-breadcrumb-item>
  <b-breadcrumb-item active>Current Page</b-breadcrumb-item>
</b-breadcrumb>

b-button

Standard button with Bulma styling.

Key props: type, size, label (String — overrides slot), icon-left, icon-right, icon-pack, loading, outlined, expanded, rounded, inverted, native-type ("button" | "submit" | "reset"), tag (renders as different element/component)

Slots: default (button content when label not set)

<b-button type="is-primary" icon-left="plus" @click="add">Add Item</b-button>
<b-button type="is-danger" outlined loading>Deleting…</b-button>
<b-button tag="router-link" to="/about" type="is-link">About</b-button>

b-carousel

Horizontally-scrolling image/content carousel.

Key props: v-model (Number — active slide index), animated ("slide" | "fade"), interval (Number ms, autoplay speed), autoplay, pause-hover, arrow, arrow-hover, indicator, indicator-style, overlay, progress, progress-type, icon-pack, icon-prev, icon-next

Slots: default (place <b-carousel-item> children); list (scoped: { active, switch }) — custom indicator list; indicators (scoped: { i })

<b-carousel v-model="activeSlide" :autoplay="false">
  <b-carousel-item v-for="(item, i) in items" :key="i">
    <figure class="image is-16by9">
      <img :src="item.image" :alt="item.alt">
    </figure>
  </b-carousel-item>
</b-carousel>

b-checkbox

Checkbox input.

Key props: v-model (Boolean | Array), native-value (value pushed into array when checked), type, size, disabled, required, name, indeterminate, true-value, false-value

Slots: default (label text)

<!-- Single boolean -->
<b-checkbox v-model="agreed">I agree to the terms</b-checkbox>

<!-- Array binding — checked items pushed into list -->
<b-checkbox v-model="selected" native-value="apple">Apple</b-checkbox>
<b-checkbox v-model="selected" native-value="banana">Banana</b-checkbox>

b-checkbox-button

Checkbox styled as a button (use inside a <b-field grouped>).

Key props: Same as b-checkbox plus type

<b-field grouped>
  <b-checkbox-button v-model="selected" native-value="A" type="is-primary">Option A</b-checkbox-button>
  <b-checkbox-button v-model="selected" native-value="B" type="is-primary">Option B</b-checkbox-button>
</b-field>

b-clockpicker

Visual clock face time picker (alternative to b-timepicker).

Key props: v-model (Date), placeholder, inline, editable, disabled, size, expanded, icon, icon-pack, rounded, loading, hour-format ("12" | "24"), increment-minutes, min-time, max-time

Slots: trigger

<b-field label="Time">
  <b-clockpicker v-model="time" placeholder="Select time" hour-format="12" />
</b-field>

b-collapse

Collapsible content section.

Key props: v-model (Boolean — open state), animation, position ("is-top" | "is-bottom")

Slots: trigger (scoped: { open }) — the toggle trigger element; default — the collapsible content

Emits: open, close

<b-collapse v-model="isOpen">
  <template #trigger="{ open }">
    <b-button :label="open ? 'Hide' : 'Show'" :icon-left="open ? 'chevron-up' : 'chevron-down'" />
  </template>
  <div class="notification">
    This content is collapsible.
  </div>
</b-collapse>

b-colorpicker

HSL color picker with dropdown.

Key props: v-model (Color object { red, green, blue, alpha }), position, inline, expanded, disabled, alpha (show alpha slider), representation ("square" | "triangle")

Slots: trigger, header, footer (scoped: { color })

<b-field label="Pick color">
  <b-colorpicker v-model="color" />
</b-field>

b-datepicker

Date (or date range) picker with calendar dropdown.

Key props: v-model (Date | Date[]), min-date, max-date, placeholder, inline, editable, disabled, range, multiple, size, expanded, icon, icon-pack, rounded, loading, type ("month" for month-only picker), date-formatter, date-parser, locale

Slots: trigger, header, footer

<b-field label="Date">
  <b-datepicker v-model="date" placeholder="Click to select…" icon="calendar" />
</b-field>

<!-- Range picker -->
<b-datepicker v-model="dateRange" range />

b-datetimepicker

Combined date + time picker.

Key props: All b-datepicker props, plus datetime-formatter, datetime-parser, time-creator, and timepicker pass-through via :timepicker

<b-field label="Appointment">
  <b-datetimepicker v-model="datetime" placeholder="Select date and time" />
</b-field>

b-dialog

Programmatic confirmation/alert/prompt dialog (not a declarative component).

Open imperatively:

import { DialogProgrammatic as Dialog } from 'buefy'

// Alert
Dialog.alert({ title: 'Notice', message: 'Operation complete.', type: 'is-info' })

// Confirm
Dialog.confirm({
  title: 'Delete item',
  message: 'Are you sure? This cannot be undone.',
  type: 'is-danger',
  hasIcon: true,
  onConfirm: () => deleteItem(),
  cancelText: 'Cancel',
  confirmText: 'Delete'
})

// Prompt
Dialog.prompt({
  message: 'Enter your name',
  inputAttrs: { placeholder: 'Name', maxlength: 50 },
  onConfirm: (value: string) => console.log(value)
})

b-dropdown

Dropdown menu with flexible trigger and item content.

Key props: v-model (selected value), disabled, inline, scrollable, max-height, position ("is-top-right" | "is-top-left" | "is-bottom-left" | "is-bottom-right"), triggers (Array, default ['click']), animation, expanded, multiple, trap-focus, close-on-click, can-close

Slots: trigger (scoped: { active }) — toggle element; default — dropdown content (use <b-dropdown-item> children)

b-dropdown-item props: value, separator, disabled, custom, has-link, paddingless

<b-dropdown v-model="selected" aria-role="list">
  <template #trigger="{ active }">
    <b-button :label="selectedLabel" type="is-primary" :icon-right="active ? 'chevron-up' : 'chevron-down'" />
  </template>

  <b-dropdown-item value="option1" aria-role="listitem">Option 1</b-dropdown-item>
  <b-dropdown-item value="option2" aria-role="listitem">Option 2</b-dropdown-item>
  <b-dropdown-item separator />
  <b-dropdown-item value="option3" aria-role="listitem">Option 3</b-dropdown-item>
</b-dropdown>

b-field

Wrapper for form inputs — provides label, validation state, help text, and grouping.

Key props: label, label-for (String — id of the input it labels), type (validation state: "is-danger" | "is-success" | "is-warning" | "is-info"), message (String | String[] — help/error text below input), grouped, group-multiline, position ("is-centered" | "is-right"), expanded, horizontal, addons, custom-class

Slots: default (the input component(s)); label (custom label); message (custom message, scoped: { messages })

<b-field label="Email" :type="errors.email ? 'is-danger' : ''" :message="errors.email">
  <b-input v-model="form.email" type="email" placeholder="user@example.com" />
</b-field>

<!-- Grouped (addons) -->
<b-field>
  <b-input expanded placeholder="Search…" />
  <p class="control">
    <b-button type="is-primary" icon-left="magnify">Search</b-button>
  </p>
</b-field>

b-icon

Renders an icon from the registered icon pack.

Key props: icon (String — icon name, no pack prefix), pack (String — overrides default pack), type, size, custom-size, custom-class

<b-icon icon="home" type="is-primary" />
<b-icon icon="check-circle" size="is-large" type="is-success" />

b-image

Lazy-loading image with aspect-ratio placeholder.

Key props: src, alt, ratio (Bulma ratio: "1by1" | "4by3" | "16by9" | "square" etc.), placeholder, lazy (Boolean, enables IntersectionObserver lazy loading), webp-fallback, src-fallback, caption-first

Slots: placeholder (custom placeholder), caption

<b-image src="/photo.jpg" alt="A photo" ratio="16by9" lazy />

b-input

Text / textarea input.

Key props: v-model (String | Number), type (HTML input type, default "text"), placeholder, size, icon, icon-right, icon-clickable, icon-right-clickable, loading, rounded, expanded, lazy, password-reveal, has-counter, maxlength, autocomplete, custom-class

Emits: icon-click, icon-right-click, focus, blur

<b-field label="Username">
  <b-input v-model="username" placeholder="Enter username" icon="account" />
</b-field>

<b-field label="Password">
  <b-input v-model="password" type="password" password-reveal />
</b-field>

<b-field label="Bio">
  <b-input v-model="bio" type="textarea" maxlength="200" has-counter />
</b-field>

b-loading

Full-page or container-scoped loading overlay.

Key props: v-model (Boolean — show/hide), is-full-page (Boolean, default true), animation, can-cancel

Slots: default (custom spinner content)

Programmatic:

import { LoadingProgrammatic as Loading } from 'buefy'
const loader = Loading.open({ isFullPage: true })
// later:
loader.close()

<b-loading v-model="isLoading" :is-full-page="false" />

b-menu

Vertical navigation menu (sidebar-style).

Key props: accordion (Boolean, default true — only one item expanded at a time), activable

Slots: default — place <p class="menu-label"> and <b-menu-list> containing <b-menu-item> children

b-menu-item props: label, icon, icon-pack, size, tag, active, expanded, disabled, animation

b-menu-item slots: default (sub-items), label (scoped: { expanded, active })

<b-menu>
  <b-menu-list label="Navigation">
    <b-menu-item icon="home" label="Home" tag="router-link" to="/" />
    <b-menu-item icon="cog" label="Settings" :expanded="true">
      <b-menu-item label="Profile" tag="router-link" to="/settings/profile" />
      <b-menu-item label="Security" tag="router-link" to="/settings/security" />
    </b-menu-item>
  </b-menu-list>
</b-menu>

b-message

Banner message / alert box.

Key props: v-model (Boolean — show/hide), title, type, size, closable, has-icon, icon, icon-pack, auto-close, duration, progress-bar

Slots: default (body content); header (custom header)

<b-message type="is-success" title="Success" closable>
  Your changes have been saved.
</b-message>

<b-message type="is-danger" has-icon>
  <strong>Error:</strong> Something went wrong.
</b-message>

b-modal

Dialog overlay. Can display slot content, a Vue component, or raw HTML.

Key props: v-model (Boolean — open state), has-modal-card (Boolean — use .modal-card layout), width (Number|String, default 960), can-cancel (Array | Boolean — ['escape', 'x', 'outside', 'button']), full-screen, trap-focus, animation, custom-class, custom-content-class, aria-role, aria-label, destroy-on-hide

Slots: default (scoped: { close })

<b-button @click="isOpen = true">Open modal</b-button>

<b-modal v-model="isOpen" has-modal-card trap-focus>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">My Modal</p>
    </header>
    <section class="modal-card-body">
      Modal body content.
    </section>
    <footer class="modal-card-foot">
      <b-button @click="isOpen = false">Close</b-button>
    </footer>
  </div>
</b-modal>

b-navbar

Top navigation bar.

Key props: v-model (Boolean — mobile menu open state), type, transparent, fixed-top, fixed-bottom, centered, shadow, spaced, mobile-burger, close-on-click, wrapper-class

Slots: brand (logo area), start (left nav items), end (right nav items), burger (custom burger button)

b-navbar-item props: tag, active

<b-navbar type="is-primary" shadow>
  <template #brand>
    <b-navbar-item tag="router-link" to="/">
      <img src="/logo.svg" alt="Logo">
    </b-navbar-item>
  </template>

  <template #start>
    <b-navbar-item tag="router-link" to="/">Home</b-navbar-item>
    <b-navbar-item tag="router-link" to="/about">About</b-navbar-item>
  </template>

  <template #end>
    <b-navbar-item tag="div">
      <b-button type="is-primary" outlined>Sign up</b-button>
    </b-navbar-item>
  </template>
</b-navbar>

b-notification

Notification bar. Inline or programmatic.

Key props: v-model (Boolean), type, size, closable, has-icon, icon, icon-pack, auto-close, duration, progress-bar, position (programmatic: "is-top" | "is-top-right" | "is-bottom-right" etc.)

Slots: default (message content)

Programmatic:

import { NotificationProgrammatic as Notification } from 'buefy'
Notification.open({ message: 'Profile updated', type: 'is-success', position: 'is-top-right' })

<b-notification type="is-info" has-icon closable>
  You have 3 unread messages.
</b-notification>