Banner | Dialtone Design System

Preview

Usage

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

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

 
<dt-banner kind="base" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner kind="critical" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner kind="info" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner kind="positive" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner kind="warning" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner background-image="{$background-image}" background-size="contain"> Message body </dt-banner>
<dt-banner pinned="true" kind="warning" header-text="Optional banner title"> Message body </dt-banner>
<dt-banner important="true" kind="warning" header-text="Optional banner title"> Message body </dt-banner>

Pinned

Pins the banner to the top of the window.

 
<dt-banner
  :pinned="true"
  header-text="Optional banner title"
>
  Detailed description goes here.
  <template #action>
    <dt-button :size="200" kind="muted" importance="outlined">Action</dt-button>
  </template>
</dt-banner>

Vue API

import { DtBanner } from '@dialpad/dialtone-vue';

Slots

Name	Type
`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
`header`	Slot for the header
`icon`	Slot for custom icon

Props

Name	Default	Type
`actionClass`	`''`	`string\|array\|object` Additional class name for the action wrapper element.
`backgroundImage`	`''`	`string` Banner background image
`backgroundSize`	`'cover'`	`string` Background image size, follows the background-size CSS property values CSS background-sizes
`contentClass`	`''`	`string\|array\|object` Additional class name for the content wrapper element.
`contentId`	`generated unique ID`	`string` 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.
`dialogClass`	`''`	`string` Inner dialog class
`headerClass`	`''`	`string\|array\|object` Additional class name for the header wrapper element.
`headerId`	`generated unique ID`	`string` Sets an ID on the header element of the component. Useful for aria-describedby or aria-labelledby or any other reason you may need an id to refer to the header.
`headerText`		`string` Header text of the banner. This can be left blank to remove the header from the banner entirely.
`iconClass`	`''`	`string\|array\|object` Additional class name for the icon wrapper element.
`important`	`false`	`"true"` \| `"false"` 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 keyboard focus within the banner while it is shown (via the v-dt-focustrap directive), restoring focus to the previously focused element on close.
`kind`	`'base'`	`"base"` \| `"critical"` \| `"info"` \| `"positive"` \| `"warning"` Severity level of the notice, sets the icon and background
`pinned`	`false`	`"true"` \| `"false"` Pins the banner to the top of the window and pushes all app content down.
`showAction`	`true`	`"true"` \| `"false"` Shows the action in the banner
`showClose`	`true`	`"true"` \| `"false"` Shows the close button in the banner
`showIcon`	`true`	`"true"` \| `"false"` Shows the icon in the banner

Events

Name	Type
`close`	Close button click event

Classes

Class	Applies to	Description

Accessibility

Focus management

When important is set, the banner is presented as a modal alertdialog: keyboard focus moves to the first focusable element when it appears, stays trapped within the banner while it is shown, and returns to the previously focused element when the banner is dismissed. Reserve important for messages that must block the rest of the page until they are addressed.

Non-important banners use the status role and do not trap focus — keyboard users can Tab straight through them.

Item	Applies to	Description

Preview

Usage #

Variants and Examples #

Kind #

Pinned #

Vue API #

Slots

Props

Events

Classes #

Accessibility #

Focus management #

Usage

Variants and Examples

Kind

Pinned

Vue API

Classes

Accessibility

Focus management