import { Alert } from 'reshaped';
import IconZap from 'reshaped/icons/Zap';
function Example() {
return (
<Alert
color="critical"
icon={IconZap}
title="Alert title"
actionsSlot={
<>
<Link variant="plain" color="critical">View</Link>
<Link variant="plain" color="critical">Dismiss</Link>
</>
}
>
Your session will expire in 5 minutes.
</Alert>
);
}
SVG component for the icon displayed at the start of the alert.
Title text displayed above the main content.
Main content of the alert message.
Actions slot for rendering buttons and links. Automatically adds spacing between actions.
Color scheme for the alert elements.Options: "neutral", "critical", "warning", "positive", "primary"
Display actions to the right of the content instead of below.
bleed
number | Responsive<number>
Apply negative margin and remove side borders. Value is a base unit token multiplier.<Alert bleed={4}>
<Alert bleed={{ s: 4, m: 0 }}>
Additional CSS class for the root element.
Additional HTML attributes for the root element.
Examples
Color Variants
<Alert color="neutral" icon={IconInfo}>
Neutral information message
</Alert>
<Alert color="critical" icon={IconAlert}>
Critical error message
</Alert>
<Alert color="warning" icon={IconWarning}>
Warning message
</Alert>
<Alert color="positive" icon={IconCheckmark}>
Success message
</Alert>
<Alert color="primary" icon={IconZap}>
Primary information
</Alert>
With Actions
<Alert
color="critical"
title="Confirm deletion"
actionsSlot={
<>
<Button color="critical" onClick={handleDelete}>
Delete
</Button>
<Button variant="ghost" onClick={handleCancel}>
Cancel
</Button>
</>
}
>
This action cannot be undone.
</Alert>
Inline Actions
<Alert
inline
icon={IconInfo}
title="Update available"
actionsSlot={
<Button variant="outline" size="small">
Update now
</Button>
}
>
Version 2.0 is available for download.
</Alert>
Responsive Bleed
// Remove borders on mobile, add them back on desktop
<Alert bleed={{ s: 4, m: 0 }} color="primary">
Responsive alert with conditional borders
</Alert>