mozilla
Your Search Results

    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: Sheppy, stephaniehobson, chrisdavidmills
    Last updated by: chrisdavidmills,