Page Level Message

The Page Level Message pattern is used in response to a system action, (such as a database failure), or for other reasons as specified by the application developer. Page Level message have multiple options for placement and position.  Page Level Message should be clear and concise.

The message pattern describes four types of messages:


Appearance characteristics for this component.

Configuration Options

  1. Placement: Inline or Overlay
    1. Inline - Messages can be placed inside the page content.  Existing content is moved up/down to accommodate the message. Banded edge-to-edge
    2. Overlay - Messages are overlaid on top of existing content.  Existing content does not move.  Banded edge-to-edge.
  2. Background Color - The background of the message area can be configured in multiple color options to match the existing OS or to convey message severity (ie. red, yellow, green, etc)
  3. Position - Top or Bottom of Screen
    1. Top - Messages can be shown at the top of the screen below the branding area.
    2. Bottom -  Messages can be shown at the bottom of the screen above the navbar (similar to snackbars on Android).
  4. Animation - Messages will allow for the use of standard OS animations for showing/hiding messages.

Message Truncation

If a message's entire contents cannot fit on a single line, the message will truncate. If the truncation prevents the message from being fully understood, then a "More Details" link appears. Clicking the "More Details" link causes the message area to expand to reveal the message in its entirety.

Multiple Messages

When there are multiple messages of the same severity level, a “count” icon will display, showing the number of messages



Common behaviors for this component.



Usage guidelines for this component.



Fig 1. Confirmation iOS



Fig 2. Confirmation Android



Fig 3. Information iOS



Fig 4. Information Android



Fig 5. Warning iOS



Fig 6. Warning Android



Fig 7. Error iOS



Fig 8. Error Android