Dialog

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

# Alert

<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch alert (default)"
                type="is-primary"
                size="is-medium"
                @click="alert" />

            <b-button
                label="Launch alert (custom)"
                type="is-primary"
                size="is-medium"
                @click="alertCustom" />

            <b-button
                label="Launch alert (custom)"
                type="is-danger"
                size="is-medium"
                @click="alertCustomError" />
        </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">
            <b-button
                label="Launch confirm (default)"
                type="is-info"
                size="is-medium"
                @click="confirm" />

            <b-button
                label="Launch confirm (custom)"
                type="is-info"
                size="is-medium"
                @click="confirmCustom" />

            <b-button
                label="Launch confirm (custom)"
                type="is-danger"
                size="is-medium"
                @click="confirmCustomDelete" />
        </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">
            <b-button
                label="Launch prompt (default)"
                type="is-dark"
                size="is-medium"
                @click="prompt" />

            <b-button
                label="Launch prompt (number)"
                type="is-dark"
                size="is-medium"
                @click="promptNumber" />

            <b-button
                label="Launch prompt (Not closing default)"
                type="is-dark"
                size="is-medium"
                @click="promptNotClosed" />
        </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')

# Promise

You can set defaultProgrammaticPromise constructor option to get a Promise

const { result, dialog } = await this.$buefy.dialog.confirm({
    message: 'Are you sure?',
    closeOnConfirm: false
});

# API

Name
Description
Type
Values
Default
typeType (color) of the confirm button (and the icon if hasIcon)Stringis-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 titleString
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, Array
hasIconAdds an icon on the left side depending on the type or iconBooleanfalse
iconIcon name if hasIcon, optionalString
iconPackIcon pack to use if hasIcon, optionalStringmdi, fa, fas, far, fad, fal
sizeDialog's size, optionalStringis-small, is-medium, is-large
animationCustom animation (transition name)Stringzoom-out
confirmTextText of the confirm buttonStringOK
cancelTextText of the cancel buttonStringCancel
canCancelCan close dialog by clicking cancel button, pressing escape or clicking outsideBoolean, Arrayescape, button, outsidetrue for Confirm/Prompt, false for Alert
inputAttrsPrompt only: input's attributesObjectAny HTML5 input attribute
onConfirmCallback function when the confirm button is clickedFunction (value: String, dialog: VueInstance)
closeOnConfirmTurning this prop into false allows to make async requests in onConfirm callbackBooleantrue, 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 layoutsStringclip, 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.Stringbody
focusOnFocus on confirm or cancel button (when dialog is not prompt)Stringconfirm, cancelconfirm
trap-focusTrap focus inside the dialog.Booleantrue
aria-roleRole attribute to be passed to modal container for better accessibility.Stringdialog, alertdialog
aria-modalImprove accessiblity when enabled.Booleanfalse

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

Improve this page on GitHub