Provide contextual feedback messages for typical user actions
CdrAlert is a simple wrapper component that allows for composing various alert layouts.
There are four different options for styling the alert, based on the alert type.
Alerts should be passed an appropriate icon and text for the alert message type.
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"
.Alert 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 four types of alerts: error, warning, success, and informational. 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 alerts 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.
type
name
string
type
'info'
default
Sets the alert style. Possible values: { 'info' | 'success' | 'warning' | 'error'}
Find more information about using Slots in the article Getting Started as a Developer.
default
name
Slot for CdrAlert content.