Messages

Messages provide the user with information after performing an action. The messages fall into four categories - error, warnings, informational and success.

The default message type is an error message. All messages may have an optional close icon.

Error Message (default)

Warning Message

Information Message

Success Message

Classes

  • lotusMessage2 - class that is assigned to the outermost div. Gives you the default error message.
  • lotusIcon - class assigned to the message icon.
  • lotusMessageBody - class assigned to the div that wraps the message body
  • lotusWarning - additional class for warning message
  • lotusInfo - additional class for informational message
  • lotusSuccess - additional class for success message
  • lotusDelete - class for optional close icon

Basic Implementation

Create a div and assign it the class lotusMessage2.

Put a blank image or an empty container inside the div, giving it the class lotusIcon and the additional lotusIconMsg class from the above list.

Include a span for your alternate text, giving it the class lotusAltText.

Wrap the message text in a div tag assigned the class lotusMessageBody.

For the close button, add a link surrounding a blank image assigned the lotusDelete class.

Variations

The default message is an error message. To create other message types, add the lotusWarning, lotusInfo, or lotusSuccess class as an additional class along with lotusMessage2 to the outermost div.

Accessiblity

Put role="alert" on the lotusMessage div.

Create lotusAltText for the message icons and the optional delete icon (see code samples).

Examples

Sample HTML - Error Message

Sample HTML - Warning Message

Sample HTML - Information Message

Sample HTML - Confirmation Message

CSS (messages2.css)

Theme CSS (messages2Theme.css)

We used to just have one message box. Now we have 4 different types of messages.

April 2007: added optional close icon to the error message.

September 2010: New version of the message component that solves issues with directly styling img and span tags. Added classes to the message icon and message body. The message body was wrapped by a span tag, it is now wrapped by a div tag. This makes messages able to handle more robust content than what is in the samples.

January 2011: Added accessibility documentation.

February 9, 2011: The confirm message is now called a success message and the old confirm message is deprecated. All messages need to have a close icon now.

September 2011: changed role="status" on info and confirm messages to role="alert."

January 2012: hide the lotusIcon when images are turned off.

March 1, 2012: updated colors, padding, font.

See also: