Alert

Alerts display important messages to users. They communicate status, feedback, or contextual information.

Usage

Use alerts to inform users about important information, errors, warnings, or successful actions.

Variants

Info

New updates are available for your account.

<div class="df-alert df-alert--info">
  <svg class="df-alert__icon"><!-- info icon --></svg>
  <div class="df-alert__content">
    <span class="df-alert__message">New updates are available.</span>
  </div>
</div>

Success

Your changes have been saved successfully.

<div class="df-alert df-alert--success">...</div>

Warning

Your session will expire in 5 minutes.

<div class="df-alert df-alert--warning">...</div>

Error

There was an error processing your request.

<div class="df-alert df-alert--error">...</div>

With Title

System UpdateWe'll be performing scheduled maintenance on Saturday from 2-4 AM EST.

<div class="df-alert df-alert--info">
  <svg class="df-alert__icon">...</svg>
  <div class="df-alert__content">
    <span class="df-alert__title">System Update</span>
    <span class="df-alert__message">We'll be performing maintenance...</span>
  </div>
</div>

Dismissible

Profile updated successfully.

<div class="df-alert df-alert--success df-alert--dismissible">
  <svg class="df-alert__icon">...</svg>
  <div class="df-alert__content">
    <span class="df-alert__message">Profile updated successfully.</span>
  </div>
  <button class="df-alert__close" aria-label="Dismiss">
    <svg><!-- close icon --></svg>
  </button>
</div>

With Action

Your trial expires in 3 days.

<div class="df-alert df-alert--warning">
  ...
  <div class="df-alert__actions">
    <button class="df-alert__action">Upgrade Now</button>
    <button class="df-alert__action df-alert__action--secondary">Learn More</button>
  </div>
</div>

Inline Alert

Invalid email address

<span class="df-alert-inline df-alert-inline--error">
  <svg>...</svg>
  Invalid email address
</span>

Accessibility

• Use appropriate ARIA roles (role="alert" for important messages)
• Ensure alerts are announced by screen readers
• Provide keyboard-accessible dismiss buttons
• Use sufficient color contrast

Best Practices

• Keep messages concise and actionable
• Use the appropriate variant for the message type
• Don't overuse alerts—they should be meaningful
• Place alerts near relevant content

API Reference

Classes

Class	Description
df-alert	Base alert class
df-alert--info	Info variant (blue)
df-alert--success	Success variant (green)
df-alert--warning	Warning variant (yellow)
df-alert--error	Error variant (red)
df-alert--dismissible	Alert with close button
df-alert__icon	Icon container
df-alert__content	Content wrapper
df-alert__title	Alert title
df-alert__message	Alert message
df-alert__close	Close button
df-alert__actions	Action buttons container