Skip to main content

​
Banner

The VBanner component is used to display important information to users in a prominent, temporary, and dismissable container. Banners should be displayed at the top of the screen and can contain actions.

​
Usage

<template>
  <v-banner text="This is a banner message" />
</template>

​
Props

​
text
string
The main text content of the banner
​
avatar
string
Image URL for an avatar to display in the prepend area
​
icon
IconValue
Icon to display in the prepend area
​
color
string
Applies specified color to the component
​
bgColor
string
Applies specified color to the background
​
stacked
boolean
default:"false"
Forces actions to stack vertically
​
sticky
boolean
default:"false"
Makes the banner stick to the top of the screen when scrolling
​
lines
string
Limits the number of text lines. Options: one, two, three
​
border
string | number | boolean
Applies border styles to the component
​
density
string
Adjusts the vertical height. Options: default, comfortable, compact
​
elevation
string | number
Elevation level (0-24)
​
height
string | number
Sets the height of the component
​
maxHeight
string | number
Sets the maximum height of the component
​
maxWidth
string | number
Sets the maximum width of the component
​
minHeight
string | number
Sets the minimum height of the component
​
minWidth
string | number
Sets the minimum width of the component
​
width
string | number
Sets the width of the component
​
location
string
Positions the banner. Options: top, bottom, start, end
​
position
string
CSS position property. Options: static, relative, fixed, absolute, sticky
​
rounded
string | number | boolean
Border radius of the banner
​
tag
string
default:"div"
Specify a custom HTML tag to use on the root element
​
mobile
boolean
Forces mobile display breakpoint behavior

​
Slots

​
default
The default slot for custom banner content
​
prepend
Slot for content before the banner text (replaces icon/avatar)
​
text
Slot for custom text content
​
actions
Slot for action buttons

​
Examples

​
Basic Banner

<template>
  <v-banner
    icon="mdi-information"
    text="This is an informational banner message."
  >
    <template v-slot:actions>
      <v-btn>Dismiss</v-btn>
    </template>
  </v-banner>
</template>

<template>
  <v-banner
    avatar="/avatar.jpg"
    text="John Doe shared a document with you."
  >
    <template v-slot:actions>
      <v-btn color="primary">View</v-btn>
      <v-btn>Dismiss</v-btn>
    </template>
  </v-banner>
</template>

​
Stacked Banner

<template>
  <v-banner
    stacked
    icon="mdi-alert"
    color="warning"
    text="Your subscription expires in 3 days. Please renew to continue using all features."
  >
    <template v-slot:actions>
      <v-btn color="primary">Renew Now</v-btn>
      <v-btn variant="text">Remind Me Later</v-btn>
    </template>
  </v-banner>
</template>

​
Sticky Banner

<template>
  <v-banner
    sticky
    bg-color="info"
    icon="mdi-update"
    text="A new version is available. Refresh to update."
  >
    <template v-slot:actions>
      <v-btn @click="refreshPage">Refresh</v-btn>
      <v-btn variant="text">Later</v-btn>
    </template>
  </v-banner>
</template>

​
Multi-line Banner

<template>
  <v-banner
    lines="two"
    icon="mdi-cloud-upload"
    text="Your files are being synced to the cloud. This may take a few minutes depending on your connection speed."
  >
    <template v-slot:actions>
      <v-btn variant="text">View Progress</v-btn>
    </template>
  </v-banner>
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us