Provides contextual feedback messages for typical user actions
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. There are five different options for styling the banner, based on the banner type.
Banners should be passed an appropriate icon and text for the banner message type.
CdrBanner provides an optional message-body
slot in the case where additional information about the message needs to be communicated.
CdrBanner provides an optional icon-right
slot that can be used to provide an action related to the Banner such as a close button. The actionable element should have an aria-label that explains it's relationship to the banner and what happens when you click on it.
Optional info-action
slot that can be used to provide an action related to the Banner such as a link or tooltip. The actionable element should have an aria-label that explains it's relationship to the banner and what happens when you click on it.
Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:
role="alert"
for messages that are important or time sensitive to ensure that the messaging is immediately announced to screen readers. For other content, add aria-live="polite"
.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.
Use to inform that something went wrong. They affect or block the user's experience and must be resolved before moving forward.
Use for a message requiring attention but not resolution in order to continue. Warning banners might tell a user what could happen if they don’t address what they’re being warned about.
Use to communicate that an action has been successfully completed. Provides a positive response to user actions. No action is required.
Use to provide context around a situation. No action is required.
Use to provide generic messaging that does not fit the other types.
type
name
string
type
'default'
default
Sets the banner style. Possible values: { 'info' | 'success' | 'warning' | 'error' | 'default'}
Find more information about using Slots in the article Installing Cedar.
default
name
Slot for primary message text
icon-left
name
Slot for icon matching banner type
message-body
name
Slot for additional content about the message
icon-right
name
Slot for an additional icon on right
info-action
name
Slot for an action-wrapped icon