Banner

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

info

For more details about Vuetify’s usage of Banner component, click Banner page.
For more prop explanations, click Vuetify Banner API page.

Props

Attribute	Description	Type	Default
app	When used inside of main, will calculate top based upon application Toolbar and system-bar.	boolean	false
class		string	undefined
color	Applies specified color	string	undefined
dark	Applies dark theme	boolean	false
elevation	Designates an elevation applied to the component between 0 and 24.	number-string	undefined
hight	Sets the height for the component.	number-string	undefined
icon	Designates a specific icon.	string	undefined
iconColor	Designates a specific icon color.	string	undefined
light	Applies the light theme	boolean	false
maxHeight	Sets the maximum height for the component.	number-string	undefined
maxWidth	Sets the maximum width for the component.	number-string	undefined
minHeight	Sets the minimum height for the component.	number-string	undefined
minWidth	Sets the minimum width for the component.	number-string	undefined
mobileBreakpoint	Sets the designated mobile breakpoint for the component.	number-string	undefined
outlined	Removes elevation (box-shadow) and adds a thin border.	boolean	false
rounded	Designates the border-radius applied to the component.	boolean-string	undefined
shaped	Applies a large border radius on the top left and bottom right of the card.	boolean	false
singleLine	Forces the banner onto a single line.	boolean	false
sticky	Applies position: sticky to the component (Evergreen browsers only).	boolean	false
tag	Specify a custom tag used on the root element.	string	'div'
tile	Removes the component’s border-radius.	boolean	false
value	Controls whether the component is visible or hidden.	boolean	true
width	Sets the width for the component.	boolean-string	undefined