Shows a tiny alert message. We commonly use these for validation errors and small hints to users.

import Nri.Ui.Message.V1 as Message


view =
    Message.tiny Message.Tip (Message.Markdown "Don't tip too much, or your waitress will **fall over**!")

NOTE: When using a Custom theme, tiny ignores the custom backgroundColor.

Shows a large alert or callout message. We commonly use these for highlighted tips, instructions, or asides in page copy.

import Nri.Ui.Message.V1 as Message


view =
    Message.large Message.Tip (Message.Plain "Two out of two parents agree: NoRedInk sounds like a fun place to work.")

Shows a banner alert message. This is even more prominent than Message.large. We commonly use these for flash messages at the top of pages.

import Nri.Ui.Message.V1 as Message


view =
    Message.banner Message.Success (Message.Plain "John Jacob Jingleheimer Schmidt has been dropped from First Period English.")

Error / Alert / Tip / Success

Prefer using the simplest variant that meets your needs.

• Plain: provide a plain-text string
• Markdown: provide a string that will be rendered as markdown
• Html: provide custom HTML

Transform the messages produced by some Content.

PRIVATE

Adds a dismiss ("X" icon) to a banner which will produce the given msg when clicked.

Shows an appropriate error message for when something unhandled happened.

import Nri.Ui.Message.V1 as Message


view maybeDetailedErrorMessage =
    viewMaybe Message.somethingWentWrong maybeDetailedErrorMessage