Banner

Storybook Figma

A banner is a type of Notice, delivering system and engagement messaging. It is highly intrusive and should be used sparingly and appropriately.

Preview

Usage

System banners are used for system messaging. They are full-width notices placed in one of two locations:

  1. Above everything else: If the banner is related to the entire app (e.g. the user lost internet service), place the banner first. These should not be dismissable until the issue is resolved. To pin the banner to the top of the app, add the .d-notice--pinned class.
  2. Below the top bar: This is the default location for system banners. Use these when it affects only a particular area of the product (e.g. when the user is in Do Not Disturb mode).

Banners are a type of notice and so you can use the following Notice styles in conjunction with .d-banner.

Variants and Examples

Kind

Pinned

Pins the banner to the top of the window.

Vue API

Slots

Name
Description
action

Enter a possible action for the user to take, such as a link to another page
default

the main textual content of the banner
icon

Slot for custom icon
titleOverride

Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the "title" prop.

Props

Name
Description
Default
backgroundImage

Banner background image

 Type: string
''
backgroundSize

Background image size, follows the background-size CSS property values CSS background-sizes

Type: string
'cover'
contentId

Sets an ID on the content element of the component. Useful for aria-describedby or aria-labelledby or any other reason you may need an id to refer to the content.

 Type: string
function() { return utils.getUniqueString(); }
dialogClass

Inner dialog class

 Type: string
''
hideAction

Hides the action from the notice

 Type: boolean
Values: truefalse
 false
hideClose

Hides the close button from the notice

 Type: boolean
Values: truefalse
 false
hideIcon

Hides the icon from the notice

 Type: boolean
Values: truefalse
 false
important

Used in scenarios where the message needs to visually dominate the screen. This will also change the aria role from status to alertdialog. and will modally trap the keyboard focus in the dialog as soon as it displays.

 Type: boolean
Values: truefalse
 false
kind

Severity level of the notice, sets the icon and background

 Type: string
Values: baseerrorinfosuccesswarning
 'base'
pinned

Pins the banner to the top of the window and pushes all app content down.

 Type: boolean
Values: truefalse
 false
title

Title header of the notice. This can be left blank to remove the title from the notice entirely.

 Type: string
''
titleId

Sets an ID on the title element of the component. Useful for aria-describedby or aria-labelledby or any other reason you may need an id to refer to the title.

 Type: string
function() { return utils.getUniqueString(); }

Events

Name
Description
close

Close button click event

Classes

Class
Applies to
Description

Accessibility

Item
Applies to
Description
Banner documentation last updated Thursday, June 11, 2026