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
Structure

Empty

  • Design
  • Code
  • Props

Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app.

The Empty component is a visual indicator for a lack of content or data. It can be useful in scenarios like empty tables, lists, or search results.

The component provides a flexible design that allows users to specify icons, texts, buttons, and even replaceable components.

The component should usually cover the whole area of the section and have a slightly darker background than the regular content. It can be also used for large notification messages.

Types of empty states

  • First use – Occurs with a new product or service when there is still nothing to show.
  • User cleared – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
  • Errors – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
  • No results/No data – Occurs when there is no content to display. This can happen when a search query returns no results or when no data is available for the selected filters (such as when filtering by a date range with no entries).

When to use

  • Can be the case for a empty list table or search results
  • Cover the whole area where normally content would be displayed
  • Add personality by adding an illustration or icon (for example by using FontAwesome)
  • Tell your user to do something: provide a call-to-action button
  • Can be also used for large notification messages

Related

  • Button

Reference

  • Breakfree Graphics Empty States – The Most Overlooked Aspect of UX
  • justinmind Everything you need to know about empty state design

On this page

  • Types of empty states
  • Related
  • Reference

References

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