Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Status

Relays information to the user in a transitory fashion, typically to confirm a user action or to alert the user to a system event. See the Coding guide for details on how to implement a status bar. Sometimes status bars are referred to as "banners."

Characteristics

  • Examples include deleting multiple photos in Gallery, or deleting or moving multiple emails.
  • Positioned at the bottom of the screen, covering underlying content.
  • Closing: Status bars automatically disappear, typically after a few seconds for short messages. This can be longer, though, depending on the message and context.
  • Can include an input, such as an "Undo" option; this is optional.
  • Can optionally include an image.
  • Can either be part of an app (such as a "Photos deleted" banner in the Gallery app) or in the System (such as a "Low battery" alert).
  • Avoid displaying more than one status bar at the same time. If two status bars appear at the same time, the newer status bar replaces the older one.

Visuals

Text is always centered on the status bar. In general, it's recommended that you avoid having more than two lines of text in your status bar. Although the text should always be white, you can use blue to highlight information of importance.

The height of the status bar is variable depending on the amount of text it contains.

Alarm

Here's a banner announcing that the user has successfully set an alarm. Note the use of blue to indicate the important details.

Email selection

Note here that the status bar is displayed above the toolbar at the bottom of the screen.

Variations

Status with only a title

Status with title and image

Status with title and input

 

Interactions

This diagram shows how the status bar should work.

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, stephaniehobson, Sheppy
 Last updated by: chrisdavidmills,