You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Banners

The v-banner component is used as a middle-interrupting message to the user with one to two actions. It comes in two variations single-line and multi-line (implicit). These can have icons and actions that you can use with your message. Note that only one banner should be shown at a time.

Usage

Banners can contain one to two lines of text, to which actions and icons can be added.

API

ComponentDescription
v-bannerPrimary Component
v-banner-textSub-component used to display the v-banner subtitle. Wraps the #text slot
v-banner-actionsSub-component that modifies the default styling of v-btn. Wraps the #actions slot

Anatomy

The recommended placement of elements inside of v-banner is:

  • Place a v-banner-avatar or v-banner-icon on the far left
  • Place v-banner-text to the right of any visual content
  • Place v-banner-actions to the far right of textual content, offset bottom

Element / AreaDescription
1. ContainerThe Banner container holds all v-banner components
2. Avatar / Icon (optional)Leading media content intended to improve visual context
3. TextA content area for displaying text and other inline elements
4. Actions (optional)A content area that typically contains one or more v-btncomponents

Examples

Props

Lines

The prop lines can be used to specify how the displayed text should be handled based on its length.

Sticky

You can optionally turn on the sticky prop to ensure that the content is pinned to the top of the screen.

Slots

Actions

Banners may have one or two text buttons that don’t stand out that much.

Icon

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

Prepend

The prepend slot allows you to to explicitly control the content and functionality within it. Icons also help to emphasize a banner’s message.

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 onGitHub