Alert
Alert
Overview
An alert to display information on a website.
By default it is black text on a black background
Installation
npm install @rhds/elements
Slots
- Default Slot
-
Provide a description for the alert message
header-
Provide a header for the alert message.
actions-
Provide actions that the user can take for the alert
Attributes
state-
Communicates the urgency of a message and is denoted by various styling configurations.
default- Indicates generic information or a message with no severity.info- Indicates helpful information or a message with very little to no severity.success- Indicates a success state, like if a process was completed without errors.warning- Indicates a caution state, like a non-blocking error that might need to be fixed.danger- Indicates a danger state, like an error that is blocking a user from completing a task.
- DOM Property
state- Type
-
'default' | 'error' | 'success' | 'warning' | 'danger' | 'info' - Default
-
'default'
variant- DOM Property
variant- Type
-
boolean - Default
-
false
toast-
A Toast alert is used to present a global message about an event, update, or confirmation, like the result of a user action that cannot be presented within a specific layout or component.
- DOM Property
toast- Type
-
boolean - Default
-
false
dismissable-
Alert variants have different rules regarding their ability to be dismissed by a user. Default, Info, and Success Inline alerts can be dismissed by a user selecting the close button. Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert. All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.
- DOM Property
dismissable- Type
-
boolean - Default
-
false
Methods
None
Events
close-
when the dismissable alert closes
Event Type:AlertCloseEvent