Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Alert

Overview Style Guidelines Code Demos Accessibility
  1. Installation
  2. rh-alert
  1. Installation
  2. rh-alert

Installation

rh-alert

Slots 3
Slot Name Description

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 3
DOM Property Description Type Default
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.
'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'
'default'
variant

The alternate Inline alert style includes a border instead of a line which can be used to express more urgency or better grab the attention of a user.

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.

'alternate' | 'toast' | 'inline' | undefined
unknown
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.

boolean
false
Methods 0

None

Events 1
Event Name Description
close

when the dismissable alert closes

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 0

None

© 2021-2024 Red Hat, Inc. Deploys by Netlify