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"
            />

            <b-button
                label="Launch prompt (Not closing with loading)"
                type="is-dark"
                size="is-medium"
                @click="promptNotClosedWithLoading"
            />
        </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",
                    min: 18,
                    max: 99
                },
                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, startLoading }) => {
                    startLoading();
                    this.$buefy.toast.open(`Your message is sending...`);
                    setTimeout(() => {
                        this.$buefy.toast.open(`Success message send!`);
                        close();
                    }, 2000);
                }
            });
        },
        promptNotClosedWithLoading() {
            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, { startLoading, cancelLoading }) => {
                    startLoading();
                    this.$buefy.toast.open(`Your message is sending...`);
                    setTimeout(() => {
                        this.$buefy.toast.open(`Success message send!`);
                        cancelLoading();
                    }, 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
`type`	Type (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 Sass	`is-primary`
`title`	Dialog title	String	—	—
`message`	Message 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	—	—
`hasIcon`	Adds an icon on the left side depending on the `type` or `icon`	Boolean	—	`false`
`icon`	Icon name if `hasIcon`, optional	String	—	—
`iconPack`	Icon pack to use if `hasIcon`, optional	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	—
`size`	Dialog's size, optional	String	`is-small`, `is-medium`, `is-large`	—
`animation`	Custom animation (transition name)	String	—	`zoom-out`
`confirmText`	Text of the confirm button	String	—	`OK`
`cancelText`	Text of the cancel button	String	—	`Cancel`
`canCancel`	Can close dialog by clicking cancel button, pressing escape or clicking outside	Boolean, Array	`escape`, `button`, `outside`	`true` for Confirm/Prompt, `false` for Alert
`inputAttrs`	Prompt only: input's attributes	Object	Any HTML5 input attribute	—
`onConfirm`	Callback function when the confirm button is clicked	Function (value: String, dialog: VueInstance)	—	—
`closeOnConfirm`	Turning this prop into false allows to make async requests in `onConfirm` callback	Boolean	`true`, `false`	`true`
`onCancel`	Callback function when the dialog is canceled (cancel button is clicked / pressed escape / clicked outside)	Function	—	—
`scroll`	`clip` 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`, `keep`	`clip`
`container`	DOM 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`
`focusOn`	Focus on confirm or cancel button (when dialog is not prompt)	String	`confirm`, `cancel`	`confirm`
`trap-focus`	Trap focus inside the dialog.	Boolean	—	`true`
`aria-role`	Role attribute to be passed to modal container for better accessibility.	String	`dialog`, `alertdialog`	—
`aria-modal`	Improve accessiblity when enabled.	Boolean	—	`false`

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

Improve this page on GitHub