Modal

import { Modal } from '@bbc/front-end-kit/vue'

A flexible modal dialog component built on top of the Popup component. It provides a header, customizable content, and configurable action buttons, making it ideal for confirmations, alerts, and custom modal flows.

Getting started

<template>
    <Modal
        v-model:visible="showModal"
        message="Are you sure you want to continue?"
        :options="[
            { label: 'Yes', value: true },
            { label: 'No', value: false, props: { class: '--bordered' } }
        ]"
        @answered="onAnswer"
    >
        <p>This action cannot be undone.</p>
    </Modal>
</template>

<script setup>
import { ref } from 'vue';
import { Modal } from '@bbc/front-end-kit/vue';

const showModal = ref(false);
function onAnswer(value) {
    // Handle the user's choice
    console.log('User answered:', value);
}
</script>

Guidelines

• Use the options prop to define the set of actions the user can take.
• Use the message prop for a simple header, or provide a custom header via the header slot.
• The default slot is used for the main content of the modal. It is only rendered when the modal is visible and slot content is provided.
• The modal always sets :can-close="false" on the underlying Popup — the close button is never shown. The only way to close the modal is by clicking one of the action buttons.
• You can override the Popup and Button components for advanced customization.

API

Properties

message

The main message or title to display in the modal header. If the header slot is provided, it overrides this.

Values: String

Default: ''

options

Array of button option objects to display as actions. Each option should have at least a label and value. You can also pass extra props to each button via the props key.

Values: Array of objects { label: String, value: any, props?: Object }

Default:

[
  { label: 'Accept', value: true },
  { label: 'Decline', value: false, props: { class: '--bordered' } }
]

Popup

Override the Popup component used for the modal container.

Values: Vue component

Default: Popup

Button

Override the Button component used for the action buttons.

Values: Vue component

Default: ByltButton

Models

visible

Reactive flag to toggle the modal's visibility.

Type: Boolean

Events

answered

Emitted when an action button is clicked. The modal closes automatically after emitting.

Payload: any (the value of the clicked option)

Slots

header

Custom content for the modal header. Overrides the message prop if provided.

default

The main content of the modal, rendered inside the modal body.

Example: Custom Header and Buttons

<Modal
  v-model:visible="showModal"
  :options="[
    { label: 'Delete', value: 'delete', props: { class: '--danger' } },
    { label: 'Cancel', value: 'cancel' }
  ]"
>
  <template #header>
    <h2>Delete Item</h2>
  </template>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
</Modal>