# Banners

The 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.

# Usage

Banners can have 1-2 lines of text, actions and icon.


# Examples

# Props

# Single line

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.

# Events

# Icon click

VBanner emits click:icon event on icon click, even with custom icon slot.

# Slots

# Actions

The actions slot has dismiss function in its scope, you can use it to easily dismiss banner.

# Icon

The icon slot allows you to to explicitly control the content and functionality within it.

# Misc

# Two line

Two-line VBanner can store larger amount of data, use it for big messages. This is recommend mobile implementations.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:06/19/2021, 4:17:28 PM