Alert

Alert component displays important information to the user. It captures the user's attention without disrupting their task.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Alert } from '@adaptavant/eds-core';
Added
1.15.0

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>
View in Playroom

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.

{/* 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>
View in Playroom

Custom icon​

Use customIcon to replace the default variant icon. The icon inherits the variant fill.

<Alert variant="positive" customIcon={GrowYourBrandIcon}>
	Your brand is growing!
</Alert>
View in Playroom

Expandable alert​

To build an expandable Alert, compose it yourself: render a trigger into adornmentEnd and the revealed content into children, and let the useAlertDisclosure hook wire them together.

The hook returns isOpen, which you use to conditionally render your content; triggerProps, spread onto your trigger to wire up aria-expanded, aria-controls, and onClick; and contentProps, spread onto your content to provide the id referenced by aria-controls. See the useAlertDisclosure section in the API Reference for the full shape.

const { isOpen, triggerProps, contentProps } = useAlertDisclosure();

return (
	<Alert
		adornmentEnd={
			<Box
				aria-label={isOpen ? 'Hide details' : 'Show details'}
				as="button"
				className="focus-visible:focus-ring rounded-4px p-0.5"
				type="button"
				{...triggerProps}
			>
				{isOpen ? (
					<ChevronUpIcon className="fill-primary" size="16" />
				) : (
					<ChevronDownIcon className="fill-primary" size="16" />
				)}
			</Box>
		}
		className="w-full"
		variant="critical"
	>
		Your payment could not be processed.
		{isOpen ? (
			<Text {...contentProps} as="p" className="pt-2 text-body-12">
				The card ending in 4242 was declined. Update your payment method to
				continue on your current plan.
			</Text>
		) : null}
	</Alert>
)
View in Playroom

Full-width banner​

For edge-to-edge, banner-type alerts, modify className to remove the rounded corners and let the alert span its container, for example:

<Alert className="rounded-none px-6 py-3 lg:py-2 w-full">
	This is an edge-to-edge alert banner for the user.
</Alert>
View in Playroom

API Reference​

Alert

PropDefaultDescription
children_ReactNode
The content to be displayed inside the Alert
variant?'info''caution' | 'critical' | 'info' | 'positive'
The variant of the Alert.
customIcon?_(props: IconProps) => ReactNode
Overrides the default variant icon. The icon inherits the variant fill.
adornmentEnd?_ReactNode
Trailing content shown at the end of the alert, e.g. a dismiss button or a disclosure trigger built with useAlertDisclosure.

useAlertDisclosure

useAlertDisclosure manages open state for a composed expandable Alert and returns the props to spread onto your own trigger and content elements.

const { isOpen, triggerProps, contentProps } = useAlertDisclosure({ isDefaultOpen });
ParameterDefaultDescription
isDefaultOpen?falseboolean
Initial open state.
Return valueTypeDescription
isOpenbooleanCurrent open state.
triggerProps{ 'aria-controls': string; 'aria-expanded': boolean; onClick: () => void }Spread onto the trigger element you render into adornmentEnd.
contentProps{ id: string }Spread onto the revealed content you render in children.

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>
View in Playroom
Stylable PartsDescription
iconThe icon that appears at the beginning of alert component.
adornmentEndThe trailing container holding the adornment content.

Usage guidelines​

Do

  1. Use the Default alert: Notify the user with additional information.
  2. Use the Critical alert: Inform the user of an error.
  3. Use the Caution alert: Warn the user of potential issues.
  4. Use the Positive alert: Indicate a successful event or action.
  5. Highlight errors and successes: Use alerts to emphasize error messages and successful statuses.

Don’t

  1. Don’t overuse alerts: Limit the number of alerts on the same page to prevent user confusion.
  2. Don’t use traditional error pages: Replace them with alerts instead.
  3. Don’t make alerts overly specific: Use them to convey general messages.
  4. 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.