v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations, single-line and multi-line (implicit). These can have icons which you can use with your message and actions.
Banners can have 1-2 lines of text, actions and icon.
Select your desired component from below and see the available props, slots, events and functions.
When used inside of
v-content, will calculate top based upon application
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Sets the height for the component.
Designates a specific icon.
Designates a specific icon color.
Applies the light theme variant to the component.
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices.
Forces the banner onto a single line.
Applies position: sticky to the component (Evergreen browsers only). You can find more information on the MDN documentation for sticky position.
Specify a custom tag used on the root element.
Removes the component's border-radius.
Controls whether the component is visible or hidden.
Sets the width for the component.
The slot used for the action's content such as a v-btn. The dismiss function in this slots scope, when invoked, will close the banner.
The default Vue slot.
The slot used for the icon's content.
Below is a collection of simple to complex examples.
Single-line VBanner is used for small amount of information and is recommended for desktop only implementations. You can optionally enable the sticky prop to ensure the content is pinned to the screen (note: does not work in IE11). You can find more information about sticky positioning here.
Two-line VBanner can store larger amount of data, use it for big messages.
The icon slot allows you to to explicitly control the content and functionality within it.
click:icon event on icon click, even with custom icon slot.
actions slot has
dismiss function in its scope, you can use it to easily dismiss banner.