Dialog

Dialogs inform users about a specific task and may contain critical information or require decisions

# Alert

<template>
    <section>
        <div class="buttons">
            <button class="button is-medium is-primary" @click="alert">
                Launch alert (default)
            </button>
            <button class="button is-medium is-primary" @click="alertCustom">
                Launch alert (custom)
            </button>
            <button class="button is-medium is-danger" @click="alertCustomError">
                Launch alert (custom)
            </button>
        </div>
    </section>
</template>

<script>
    export default {
        methods: {
            alert() {
                this.$buefy.dialog.alert('Everything looks fine!')
            },
            alertCustom() {
                this.$buefy.dialog.alert({
                    title: 'Title Alert',
                    message: 'I have a title, a custom button and <b>HTML</b>!',
                    confirmText: 'Cool!'
                })
            },
            alertCustomError() {
                this.$buefy.dialog.alert({
                    title: 'Error',
                    message: 'Something\'s not good but I have a custom <b>icon</b> and <b>type</b>',
                    type: 'is-danger',
                    hasIcon: true,
                    icon: 'times-circle',
                    iconPack: 'fa',
                    ariaRole: 'alertdialog',
                    ariaModal: true
                })
            }
        }
    }
</script>

# Confirm

<template>
    <section>
        <div class="buttons">
            <button class="button is-medium is-info" @click="confirm">
                Launch confirm (default)
            </button>

            <button class="button is-medium is-info" @click="confirmCustom">
                Launch confirm (custom)
            </button>

            <button class="button is-medium is-danger" @click="confirmCustomDelete">
                Launch confirm (custom)
            </button>
        </div>
    </section>
</template>

<script>
    export default {
        methods: {
            confirm() {
                this.$buefy.dialog.confirm({
                    message: 'Continue on this task?',
                    onConfirm: () => this.$buefy.toast.open('User confirmed')
                })
            },
            confirmCustom() {
                this.$buefy.dialog.confirm({
                    title: 'Privacy Politics',
                    message: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Fusce id fermentum quam. Proin sagittis,
                        nibh id hendrerit imperdiet, elit sapien laoreet elit,
                        ac scelerisque diam velit in nisl. Nunc maximus ex non
                        laoreet semper. Nunc scelerisque, libero sit amet pretium dignissim,
                        augue purus placerat justo,
                        sit amet porttitor dui metus in nisl.
                        Nulla non leo placerat, porta metus eu, laoreet risus.
                        Etiam lacinia, purus eu luctus maximus, elit ex viverra tellus,
                        sit amet sodales quam dui nec odio.
                        Nullam porta mollis est. Quisque aliquet malesuada fringilla.
                        Pellentesque volutpat lacus at ante posuere,
                        non pulvinar ante porta. Proin viverra eu massa nec porta.
                        Aliquam rhoncus velit quis sem hendrerit,
                        ut dictum nisl accumsan. Maecenas erat enim, scelerisque non ligula ac,
                        eleifend venenatis ligula.
                        Praesent molestie mauris sed elit posuere, non malesuada libero gravida.
                        In hac habitasse platea dictumst.
                        Pellentesque habitant morbi tristique senectus
                        et netus et malesuada fames ac turpis egestas.`,
                    cancelText: 'Disagree',
                    confirmText: 'Agree',
                    type: 'is-success',
                    onConfirm: () => this.$buefy.toast.open('User agreed')
                })
            },
            confirmCustomDelete() {
                this.$buefy.dialog.confirm({
                    title: 'Deleting account',
                    message: 'Are you sure you want to <b>delete</b> your account? This action cannot be undone.',
                    confirmText: 'Delete Account',
                    type: 'is-danger',
                    hasIcon: true,
                    onConfirm: () => this.$buefy.toast.open('Account deleted!')
                })
            }
        }
    }
</script>

# Prompt

<template>
    <section>
        <div class="buttons">
            <button
                class="button is-medium is-dark"
                @click="prompt">
                Launch prompt (default)
            </button>

            <button
                class="button is-medium is-dark"
                @click="promptNumber">
                Launch prompt (number)
            </button>

            <button
                class="button is-medium is-dark"
                @click="promptNotClosed">
                Launch prompt (Not closing default)
            </button>
        </div>
    </section>
</template>

<script>
export default {
    methods: {
        prompt() {
            this.$buefy.dialog.prompt({
                message: `What's your name?`,
                inputAttrs: {
                    placeholder: 'e.g. Walter',
                    maxlength: 10
                },
                trapFocus: true,
                onConfirm: (value) => this.$buefy.toast.open(`Your name is: ${value}`)
            })
        },
        promptNumber() {
            this.$buefy.dialog.prompt({
                message: `What's your age?`,
                inputAttrs: {
                    type: 'number',
                    placeholder: 'Type your age',
                    value: '18',
                    maxlength: 2,
                    min: 18
                },
                trapFocus: true,
                onConfirm: (value) => this.$buefy.toast.open(`Your age is: ${value}`)
            })
        },
        promptNotClosed() {
            this.$buefy.dialog.prompt({
                message: 'Send your message to moon 🚀',
                inputAttrs: {
                    type: 'text',
                    placeholder: 'My message is...',
                    value: 'Hello moon!'
                },
                confirmText: 'Send',
                trapFocus: true,
                closeOnConfirm: false,
                onConfirm: (value, {close}) => {
                    this.$buefy.toast.open(`Your message is sending...`)
                    setTimeout(() => {
                        this.$buefy.toast.open(`Success message send!`)
                        close()
                    }, 2000)
                }
            })
        }
    }
}
</script>

# From outside Vue instance

You can use it on Vuex or VueRouter using this syntax:

import { DialogProgrammatic as Dialog } from 'buefy'
Dialog.alert('We can use confirm and prompt methods as well')

# API

Name
Description
Type
Values
Default
typeType (color) of the confirm button (and the icon if hasIcon) String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-primary
titleDialog title String
messageMessage text (can contain HTML).
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
hasIconAdds an icon on the left side depending on the type or icon Boolean false
iconIcon name if hasIcon, optional String
iconPackIcon pack to use if hasIcon, optional String mdi, fa, fas, far, fad, fal
sizeDialog's size, optional String is-small, is-medium, is-large
animationCustom animation (transition name) String zoom-out
confirmTextText of the confirm button String OK
cancelTextText of the cancel button String Cancel
canCancelCan close dialog by clicking cancel button, pressing escape or clicking outside Boolean, Array escape, button, outsidetrue for Confirm/Prompt, false for Alert
inputAttrsPrompt only: input's attributes Object Any HTML5 input attribute
onConfirmCallback function when the confirm button is clicked Function (value: String, dialog: VueInstance)
closeOnConfirmTurning this prop into false allows to make async requests in onConfirm callback Boolean true, falsetrue
onCancelCallback function when the dialog is canceled (cancel button is clicked / 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 layouts String clip, keepclip
containerDOM element the dialog will be created on. Note that this also changes the position of the dialog from fixed to absolute. Meaning that the container should be fixed. Also note that this will override the defaultContainerElement if you specified it in your Buefy Constructor Options. See Constructor options for more details. String body
focusOnFocus on confirm or cancel button (when dialog is not prompt) String confirm, cancelconfirm
trap-focusTrap focus inside the dialog. Boolean false
aria-roleRole attribute to be passed to modal container for better accessibility. String dialog, alertdialog
aria-modalImprove accessiblity when enabled. Boolean false

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

Improve this page on GitHub