Table of Contents
Alerts
An Alert provides urgent contextual feedback in response to user action or system activity.
Used for this
- For urgent feedback
- For contextual communication inline with page content
Not for this
- For a passive system update, use a Notification instead
How to use it
Default
By default, an Alert will be read first by a screen reader and is persistent until the user dismisses it.
Type
Types indicate what kind of message is in the alert and help the user understand how to respond. They can be info, warning, error, or success.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-notifications
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Alert } from '@zendeskgarden/react-notifications'
API
Alert
| Prop name | Type | Default | Description |
|---|---|---|---|
type | 'success' | 'warning' | 'error' | 'info' | Required | Applies alert type styles |
Alert.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Alert.Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
Alert.Title
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | Applies regular (non-bold) font weight |