Overlay | Components | BootstrapVue

Available in BootstrapVue since v2.7.0

Component reference

`<b-overlay>`

v2.7.0+

<b-overlay> Properties
<b-overlay> Slots
<b-overlay> Events

Properties

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`bg-color`	`String`		CSS color to use as the opaque overlay backdrop color. If set, overrides the `variant` prop
`blur`	`String`	`'2px'`	Value for the CSS blur backdrop-filter. Be sure to include the CSS units. Not supported in IE 11. Set to null or an empty string to disable blurring
`fixed`	`Boolean`	`false`	When prop `no-wrap` is set, will use fixed positioning instead of absolute positioning. Handy if you want to obscure the entire application page
`no-center`	`Boolean`	`false`	When set, disables the vertical and horizontal centering of the overlay content
`no-fade`	`Boolean`	`false`	Disables the fade transition of the overlay
`no-wrap`	`Boolean`	`false`	Disabled generating the wrapper element, and ignored the default slot. Requires that `<b-overlay>` be placed in an element with position relative set
`opacity`	`Number` or `String`	`0.85`	Opacity of the overlay backdrop. Valid range is `0` to `1`
`overlay-tag`	`String`	`'div'`	Element tag to use as for the overlay element
`rounded`	`Boolean` or `String`	`false`	Apply rounding to the overlay to match your content routing. Valid values are `true`, `'sm'`, `lg`, `circle`, `pill`, `top`, `right`, `bottom`, or `left`
`show`	`Boolean`	`false`	When set, shows the overlay
`spinner-small`	`Boolean`	`false`	When set, renders the default spinner in a smaller size
`spinner-type`	`String`	`'border'`	Type of the default spinner to show. Current supported types are 'border' and 'grow'
`spinner-variant`	`String`		Applies one of the Bootstrap theme color variants to the default spinner. Default is to use the current font color
`variant`	`String`	`'light'`	Background theme color variant to use for the overlay backdrop
`wrap-tag`	`String`	`'div'`	Element tag to use for the overall wrapper element. Has no effect if prop `no-wrap` is set
`z-index`	`Number` or `String`	`10`	Z-index value to apply to the overlay. You may need to increase this value to suit your content or placement

Slots

Name	Scoped	Description
`default`	No	The content to be overlayed. The default slot is ignored if the prop `no-wrap` is set
`overlay`		Custom content to replace the default overlay spinner

Events

Event	Arguments	Description
`click` v2.13.0+	`event` - Native click event object	Emitted when overlay is clicked
`hidden`		Emitted when the overlay has been hidden
`shown`		Emitted when the overlay has been shown

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-overlay>`	`BOverlay`	`bootstrap-vue`

Example:

import { BOverlay } from 'bootstrap-vue'
Vue.component('b-overlay', BOverlay)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`OverlayPlugin`	`bootstrap-vue`

Example:

import { OverlayPlugin } from 'bootstrap-vue'
Vue.use(OverlayPlugin)