BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Overlay

Notification

  • Design
  • Code
  • Props

Notifications provide information about status changes, errors, or other important information that requires user attention.

Usage

Use notifications to inform users of updates or changes to system status. Communicating with users and providing immediate feedback are important for building trust. While notifications are an effective method of communicating with users, they are disruptive and should be used sparingly.

Content

Notifications provide limited space for content; therefore, the content must be short and concise. The user should be able to quickly scan the notification, understand the situation, and know what to do next.

Main elements

Title

  • The title should be short and descriptive, explaining the most important piece of information. *When possible, communicate the main message using just the title. *Use a period only if the title is a full sentence.

Body content

  • Be concise and avoid repeating or paraphrasing the title.
  • Limit content to one or two short sentences.
  • Explain how to resolve the issue by including any troubleshooting actions or next steps. You can include links within the notification body that redirect the user to next steps.

Action

  • Keep labels concise and clearly indicate the action the user can take.
  • Limit action labels to one or two words.

On this page

  • Usage
  • Content
  • Main elements
  • Title
  • Body content
  • Action

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme