Modal

Classic modal overlay to include any content you may need

<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch image modal"
                type="is-primary"
                size="is-medium"
                @click="isImageModalActive = true" />
            <b-button
                label="Launch card modal (keep scroll)"
                type="is-primary"
                size="is-medium"
                @click="isCardModalActive = true" />
        </div>

        <b-modal v-model="isImageModalActive">
            <p class="image is-4by3">
                <img src="/static/img/placeholder-1280x960.png">
            </p>
        </b-modal>

        <b-modal v-model="isCardModalActive" :width="640" scroll="keep">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img src="/static/img/placeholder-1280x960.png" alt="Image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img src="/static/img/placeholder-1280x960.png" alt="Image">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4">John Smith</p>
                            <p class="subtitle is-6">@johnsmith</p>
                        </div>
                    </div>

                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                        <a>#css</a> <a>#responsive</a>
                        <br>
                        <small>11:09 PM - 1 Jan 2016</small>
                    </div>
                </div>
            </div>
        </b-modal>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isImageModalActive: false,
                isCardModalActive: false
            }
        }
    }
</script>

# Component

A modal with a component. When you want to close the Modal, call the 'close' method — this.$parent.close() — from the injected component.

trap-focus prop could be useful in this case.

<template>
    <section>
        <b-button
            label="Launch component modal"
            type="is-primary"
            size="is-medium"
            @click="isComponentModalActive = true" />

        <b-modal
            v-model="isComponentModalActive"
            has-modal-card
            trap-focus
            :destroy-on-hide="false"
            aria-role="dialog"
            aria-label="Example Modal"
            aria-modal>
            <template #default="props">
                <modal-form v-bind="formProps" @close="props.close"></modal-form>
            </template>
        </b-modal>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password', 'canCancel'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                        <button
                            type="button"
                            class="delete"
                            @click="$emit('close')"/>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <b-button
                            label="Close"
                            @click="$emit('close')" />
                        <b-button
                            label="Login"
                            type="is-primary" />
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        components: {
            ModalForm
        },
        data() {
            return {
                isComponentModalActive: false,
                formProps: {
                    email: 'evan@you.com',
                    password: 'testing'
                }
            }
        }
    }
</script>

# Programmatic

Syntax:

// From inside Vue instance
this.$buefy.modal.open(props)

// From outside Vue instance
import { ModalProgrammatic as Modal } from 'buefy'
Modal.open(props)
<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch image modal (HTML)"
                type="is-primary"
                size="is-medium"
                @click="imageModal" />
            <b-button
                label="Launch card modal (Component)"
                type="is-primary"
                size="is-medium"
                @click="cardModal" />
        </div>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <form action="">
                <div class="modal-card" style="width: auto">
                    <header class="modal-card-head">
                        <p class="modal-card-title">Login</p>
                        <button
                            type="button"
                            class="delete"
                            @click="$emit('close')"/>
                    </header>
                    <section class="modal-card-body">
                        <b-field label="Email">
                            <b-input
                                type="email"
                                :value="email"
                                placeholder="Your email"
                                required>
                            </b-input>
                        </b-field>

                        <b-field label="Password">
                            <b-input
                                type="password"
                                :value="password"
                                password-reveal
                                placeholder="Your password"
                                required>
                            </b-input>
                        </b-field>

                        <b-checkbox>Remember me</b-checkbox>
                    </section>
                    <footer class="modal-card-foot">
                        <b-button
                            label="Close"
                            @click="$emit('close')" />
                        <b-button
                            label="Login"
                            type="is-primary" />
                    </footer>
                </div>
            </form>
        `
    }

    export default {
        methods: {
            imageModal() {
                const h = this.$createElement
                const vnode = h('p', { class: "image is-4by3" }, [
                    h('img', { attrs: { src: 'https://buefy.org/static/img/placeholder-1280x960.png' }})
                ])
                this.$buefy.modal.open({
                    content: [ vnode ]
                })
            },
            cardModal() {
                this.$buefy.modal.open({
                    parent: this,
                    component: ModalForm,
                    hasModalCard: true,
                    customClass: 'custom-class custom-class-2',
                    trapFocus: true
                })
            }
        }
    }
</script>

# Full Screen

Since0.7.8

Add the full-screen prop to cover the whole page.

<template>
    <section>
        <b-button
            label="Launch component modal"
            type="is-primary"
            size="is-medium"
            @click="isComponentModalActive = true" />

        <b-modal
            v-model="isComponentModalActive"
            has-modal-card
            full-screen
            :can-cancel="false">
            <modal-form v-bind="formProps"></modal-form>
        </b-modal>
    </section>
</template>

<script>
    const ModalForm = {
        props: ['email', 'password'],
        template: `
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title">Login</p>
                </header>
                <section class="modal-card-body">
                    <b-field label="Email">
                        <b-input
                            type="email"
                            :value="email"
                            placeholder="Your email"
                            required>
                        </b-input>
                    </b-field>

                    <b-field label="Password">
                        <b-input
                            type="password"
                            :value="password"
                            password-reveal
                            placeholder="Your password"
                            required>
                        </b-input>
                    </b-field>

                    <b-checkbox>Remember me</b-checkbox>
                </section>
                <footer class="modal-card-foot">
                    <b-button
                        label="Close"
                        @click="$parent.close()" />
                    <b-button
                        label="Login"
                        type="is-primary" />
                </footer>
            </div>
        `
    }

    export default {
        components: {
            ModalForm
        },
        data() {
            return {
                isComponentModalActive: false,
                formProps: {
                    email: 'evan@you.com',
                    password: 'testing'
                }
            }
        }
    }
</script>

# API

Name
Description
Type
Values
Default
activeWhether modal is active or not, use the .sync modifier to make it two-way bindingBooleanfalse
componentComponent to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close')Object, Function
parentParent component of the modal, required if using componentVue
propsProps to be binded to the injected componentObject
eventsEvents to be binded to the injected componentObject
contentHTML content
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.
String, Array
widthWidth of the ModalNumber, String960
full-screenDisplay modal as full screenBooleanfalse
has-modal-cardIf your modal content has a .modal-card as root, add this prop or the card might break on mobileBooleanfalse
animationCustom animation (transition name)Stringzoom-out
can-cancelCan close Modal by clicking 'X', pressing escape or clicking outsideBoolean, Arrayescape, x, outside['escape', 'x', 'outside']
on-cancelCallback function to call after user canceled (clicked 'X' / pressed escape / clicked outside)Function
scrollclip to remove the <body> scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set <body> to position fixed, might break some layoutsStringclip, keepclip
trap-focusTrap focus inside the modal.Booleantrue
auto-focusAutomatically focus modal when active.Booleantrue
custom-classCSS classes to be applied on modalString
destroy-on-hideDestroy modal on hideBooleantrue
aria-roleRole attribute to be passed to modal container for better accessibility.Stringdialog, alertdialog
aria-labelAria label attribute to be passed to modal container for better accessibility.String
aria-modalImprove accessiblity when enabled.Booleanfalse

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub