bellhop by actabl

When to use

Use notifications to communicate timely information that doesn't require immediate user action.

Success Messages

Confirm successful completion of actions like saving, submitting, or uploading.

Error Alerts

Notify users of errors or failures that occurred during an operation.

Warnings

Alert users to potential issues or important information they should be aware of.

System Updates

Inform users about background processes, new features, or system status changes.

When not to use

  • For errors that require immediate action—use a modal instead
  • For permanent status indicators—use badges or inline status text
  • When the message needs to be referenced later—use a dedicated notifications panel
  • For critical confirmations—use a modal dialog that blocks interaction

Anatomy

Notifications consist of an icon, title, message, and optional actions.

  1. Icon

    Semantic icon indicating notification type (success, error, warning, info)

  2. Title

    Brief headline summarizing the notification

  3. Message

    Detailed description providing context or additional information

  4. Actions (Optional)

    Buttons for user actions like Undo, View, or Retry

  5. Close Button

    Dismiss button allowing users to remove the notification

Types

Notifications come in semantic types with different colors and icons.

Default

Neutral notification for general information without specific urgency.

Success

Green notification confirming successful actions or positive outcomes.

Error

Red notification indicating errors or failed operations.

Warning

Yellow notification alerting users to potential issues or important information.

With Actions

Notifications with action buttons for user interaction like Undo or View Details.

Interaction

Notifications can be dismissed manually or auto-dismiss after a set duration.

Manual Dismissal

Users can close notifications by clicking the close button.

Auto-Dismiss

Notifications can automatically disappear after a few seconds for non-critical messages.

Action Buttons

Interactive buttons allow users to take immediate action related to the notification.

Persistent

Important notifications remain visible until explicitly dismissed by the user.

Placement

Notifications typically appear in corners or at the top of the viewport.

Top Center

Prominent placement for important system-wide notifications.

Top Right

Common placement that doesn't obscure main content.

Bottom Right

Unobtrusive position for success confirmations and updates.

Inline

Contextual notifications within specific sections or forms.

Accessibility

Notifications are designed to be accessible with proper ARIA roles and announcements.

Keyboard Support

  • Tab: Navigate to action buttons and close button
  • Enter/Space: Activate buttons within notification
  • Escape: Close notification if dismissible

ARIA Attributes

  • role="alert": Announces notification to screen readers
  • aria-live: Controls how updates are announced (polite/assertive)
  • aria-atomic: Ensures entire notification is read
  • aria-label: Provides accessible names for close buttons

Screen Reader Support

  • Notifications are announced when they appear
  • Error and warning notifications use assertive announcements
  • Success and info use polite announcements
  • Action buttons have clear, descriptive labels

Visual Design

  • Color is not the only means of conveying type (icons included)
  • Sufficient color contrast for all text
  • Clear visual hierarchy between title and message
  • Focus indicators on interactive elements

Resources

Design and development resources for the Notification component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →