EF
EF Design System

Alert

Alerts communicate important messages to users. They come in four semantic variants with optional icons and close buttons.

Variants

Success
Your changes have been saved successfully.
Warning
Your API key will expire in 3 days. Renew it to avoid disruption.
Error
Failed to publish content. Please check your connection and try again.
Info
A new version of the design system is available. Update when ready.
tsx
<Alert variant="success" title="Success">
  Your changes have been saved.
</Alert>

<Alert variant="danger" title="Error">
  Failed to publish content.
</Alert>

With Close Button

Click the X to dismiss each alert. Click "Reset" to bring them back.

Deployment successful.
Rate limit approaching.
Build failed on main branch.
Scheduled maintenance tonight at 11 PM.
tsx
<Alert variant="warning" closable onClose={() => setShow(false)}>
  Rate limit approaching.
</Alert>

Without Icon

This alert has no icon, using only color and text to communicate.
tsx
<Alert variant="info" showIcon={false}>No icon alert.</Alert>

Props

PropTypeDefaultDescriptionRequired
variant"success" | "warning" | "danger" | "info""info"Semantic color schemeNo
titlestring-Bold heading textNo
childrenReactNode-Alert message bodyNo
closablebooleanfalseShow a close buttonNo
showIconbooleantrueShow the variant iconNo
onClose() => void-Callback when close button is clickedNo

Usage Guidelines

  • Use success to confirm completed actions.
  • Use warning for non-blocking issues that need attention.
  • Use danger for errors that prevent the user from continuing.
  • Use info for neutral announcements or tips.
  • Make alerts closable if they are non-critical. Critical errors should persist.