• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
B2G OS
  1. MDN
  2. Archive of obsolete content
  3. B2G OS
  4. Firefox OS apps
  5. Firefox OS Building Blocks
  6. Banners

Banners

In This Article
  1. Overview
  2. Interaction
  3. Implementation guides

Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.

Overview

Banners are positioned toward the bottom of the screen. If there is an action bar, open keyboard, or visible notification, the banner is positioned immediately above. Banners are not actionable and automatically disappear after two (2) seconds. However, the duration can be adjusted based on the banner message and context.

A banner can expand to display multiple lines of text. However, displaying a banner with more than two lines of text should be avoided.

Note: You should avoid displaying more than a single banner at a time. If there is an open banner and a new banner appears, the new banner will immediately replace the existing one.

Interaction

A banner will be displayed as shown in the image to the right.

The banner will automatically disappear after two seconds. You can also tap on the banner to manually dismiss it.

Implementation guides

Status 2.0 implementation

Document Tags and Contributors

Tags: 
  • banners
  • building blocks
  • Design
  • Firefox OS
  • Gaia
 Contributors to this page: chrisdavidmills, swilkes
 Last updated by: chrisdavidmills, Feb 27, 2017, 2:57:25 AM