banner

View on GitHub

CdrBanner - Provides contextual feedback messages for typical user actions Displays informational, warning, success, error, or default messages with optional icons and action elements. Supports primary messages with expandable message bodies.

import { CdrBanner } from '@rei/cedar'

Live demo

Purpose

A banner is used to communicate a general status event or to promote a feature. CdrBanner is a simple wrapper component that allows for composing various banner layouts.

Type	Purpose
Default banner with icon left	Provides an appropriate icon and color for the banner message type.
Message body	Provides additional information in an optional `message-body` slot.
Icon right	Used for actions related to the banner, such as a close button, using an optional `icon-right` slot.
Info action	Provides an action related to the banner such as a link or tooltip, using the optional `info-action` slot.

Usage

When to use

Communicating an event not related to a specific task
Promoting a new feature
Indicating a change has happened since a previous session

When not to use

Validation is required immediately after the user interacts with a form input. Instead, use the built-in validation features of form components ::

Banner messaging keeps users informed of important and sometimes time-sensitive changes contextual to inline elements on the page. These messages help to clarify an issue and/or notify users of a potential problem that may require their attention.

There are five information types supported for banners: error, warning, success, informational, and default. Each type corresponds with a color and icon to provide a consistent, universal experience for users.

Banner type	Criteria
Error	Informs the user that something went wrong
Warning	Requires the attention of a user about something they may want to address, without the need for resolution
Success	Communicates an action has been successfully completed
Informational	Provides context around a situation, no action required
Default	Provides generic messaging

Best practices

Structure

A banner always spans the width of its parent container
The height of a banner is variable, depending on the content

Behavior

A banner persists until their conditions are either met or they are dismissed
Banners with the role of alert are not dismissable

Placement

Place banners above their area of concern
Banners persisting across pages should sit alongside the global header

Content

An icon is both user-configurable and required
Body copy should not exceed two lines
Keep content focused on a single message
You have the option to include a call-to-action

Accessibility

What Cedar provides

Improved keyboard accessibility: People can interact with the banner component using only a keyboard. We've added keyboard focus styles and support navigation using keyboard-accessible buttons
Color contrast: We've tested the contrast between text and background colors to meet WCAG 2.1 AA standards, making the text easier to read for users with visual impairments
Icon images are hidden by default

Development responsibilities

When using this component, here's what you are responsible for:

Add role="alert" for important or time sensitive messages to ensure the messaging is immediately announced to screen readers. For other content, add aria-live="status"
There is no need to do anything specific for static messaging which calls out the type of banner in the text and is loaded with the page
For messages that don't include text to identify what type of banner is displayed, add screen reader-only text adding this information to the start of the message
When using the optional icon-right or info-action slots, the actionable element should have an aria-label explaining its relationship to the banner and what happens upon click
Don't rely on color alone to convey your message. Provide an additional indicator along with color, like an icon
If an input error is automatically detected, identify it and describe the error to the user in text

<cdr-banner type="info">
  <template #icon-left>
    <icon-information-fill />
  </template>
  Static Informational Messaging With No Accessibility Markup Needed
</cdr-banner>

<br />

<cdr-banner
  type="error"
  role="alert"
>
  <template #icon-left>
    <icon-error-fill />
  </template>
  Urgent Error Message With `role="alert"`
</cdr-banner>

<br />

<cdr-banner
  type="success"
  aria-live="polite"
>
  <template #icon-left>
    <icon-check-fill />
  </template>
  Non-Urgent Success Message With `aria-live="polite"`
</cdr-banner>

<br />

<cdr-banner
  aria-label="Additional information about what kind of message is being displayed"
>
  <template #icon-left>
    <icon-question-fill />
  </template>
  Generic banner
</cdr-banner>

Resources

API

View on GitHub

CdrBanner

Props

Name	Type	Default
type	StatusType	default

Slots

Name
icon-left Icon matching banner type
default Primary message content
icon-right Additional icon
message-body Additional content about the message
info-action Action-wrapped icon