Alert
Alert component displays important information to the user. It captures the user's attention without disrupting their task.
Available from eds-core/1.15.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Alert } from '@adaptavant/eds-core';
Variants
The Alert is available in 4 variants, info is the default.
{/* info */}
<Alert>This is an alert info banner for the user.</Alert>
{/* caution */}
<Alert variant="caution">This is an alert caution banner for the user.</Alert>
{/* critical */}
<Alert variant="critical">This is an alert critical banner for the user.</Alert>
{/* positive */}
<Alert variant="positive">This is an alert positive banner for the user.</Alert>Compose content
You could add content as per your needs inside the Alert component. It just styles the text color depending on the variant used.
Need help?
Check out our Support Center. There's an entire section dedicated to your Booking Page
{/* With intereactive element */}
<Alert>
Please <TextLink href="#">click here</TextLink> to complete payment to
continue on your current plan
</Alert>
{/* With multiple lines */}
<Alert variant="caution">
<Heading as="h4" className="text-body-12 font-strong">
Need help?
</Heading>
<Text as="p" className="text-body-12">
Check out our Support Center. There's an entire section dedicated to
your Booking Page
</Text>
</Alert>Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Alert parts
<Alert
className="bg-inverse text-inverse"
classNames={{
icon: 'fill-critical',
}}
>
This is an important message to the user.
</Alert>Stylable Parts | Description |
|---|---|
| The icon that appears at the beginning of alert component. |
Usage guidelines
Do
- Use the Default alert: Notify the user with additional information.
- Use the Critical alert: Inform the user of an error.
- Use the Caution alert: Warn the user of potential issues.
- Use the Positive alert: Indicate a successful event or action.
- Highlight errors and successes: Use alerts to emphasize error messages and successful statuses.
Don’t
- Don’t overuse alerts: Limit the number of alerts on the same page to prevent user confusion.
- Don’t use traditional error pages: Replace them with alerts instead.
- Don’t make alerts overly specific: Use them to convey general messages.
- Don’t leave alerts unstructured: Include additional headings to enhance clarity and organization.
Best practices
Do
Advise a user about a system-generated event or condition related to their current context needing attention.
Don’t
If you are immediately confirming a user's action while they remain in the same view, use a Snackbar instead.
Do
In combination with form validation to help users remedy errors.
Don’t
If you are promoting, soliciting feedback, or informing a user about a feature, use a local baner instead.
Do
Use this component if you need to communicate in a prominent way.
Don’t
Use to replace an empty state page.