Modal

Use bo-modal for content that needs the user's attention before returning to the page.

Usage

<bo-button @click="open = true">Open modal</bo-button>
<bo-modal :open="open" title="Project settings" @close="open = false">
  <img src="/assets/avatar.jpeg" alt="Project preview" />
  <p>Update the project details here.</p>
</bo-modal>

Footer actions

Use the footer slot for modal actions. The component emits close; update open in the parent.

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Panel attributes.
open	boolean	false	Controls visibility.
title	string	-	Generated header title.
size	sm | default | lg | xl | full	default	Panel size.
closeOnBackdrop / closeOnEscape	boolean	true	Close behavior.
showClose / closeAriaLabel	boolean / string	true / Close	Close button settings.
role / ariaLabel / ariaLabelledBy / ariaDescribedBy	native accessibility types	dialog / -	Panel semantics.
close	event	-	Emitted when the modal requests closing.
default / header / footer	slot	-	Body, header, and footer content.