Shows an appropriate error message for when something unhandled happened.

view maybeDetailedErrorMessage =
    viewMaybe Message.somethingWentWrong maybeDetailedErrorMessage

view =
    Message.view
        [ Message.tip
        , Message.markdown "Don't tip too much, or your waitress will **fall over**!"
        ]

Construct an Attribute using a helper like onDismiss or alert.

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

Equivalent to:

Message.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

Equivalent to:

Message.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

Equivalent to:

Message.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

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

Message.view [ Message.tiny ]

This is the default size for a Message.

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

Message.view [ Message.large ]

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.

Message.view [ Message.banner ]

Provide a plain-text string.

Provide a string that will be rendered as markdown.

Provide a list of custom HTML.

Provide an HTTP error, which will be translated to user-friendly text.

This is the default theme for a Message.

Use this attribute when a user's immediate attention on the Message is required.

For example, use this attribute when:

• An invalid value was entered into a form field
• The user's login session is about to expire
• The connection to the server was lost, local changes will not be saved

-- Excerpted from Using the alert role MDN docs

Use this attribute when (1) a user's immediate attention on the Message is required, (2) the Message contains interactible elements, and (3) you've correctly set up the Message to be modal (i.e., you've set up tab-wrapping, the body's overflow is hidden, the user can't interact with elements apart from the Message's contents...)

When you use this role, verify that you are using it correctly using this MDN article.

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