Flash Message
Flash messages are used to display contextual messages related to content on the page. This could be an action that was just performed by the user or an action that should be taken by the user.
Best Practices
Flash message should:
- Be concise
- Include only paragraphs of text
- Use the
headlineattribute when the content of the message is large enough that it could benefit from an easy to scan headline.
Flash messages should not:
- Be stacked. This can confuse and dilute the importance of each message.
Content guidelines
Flash messages should contain relevant information related to the current state of the page. This should only be conveyed via text; no images should be added within the container of the flash message.
Examples
Success Flash Message
Positive feedback and new things! Let's the user know that something good has happened.
Use for:
- Success/Completion
- Positive message
- Trending upward
- Above average trends
- On-time/Ahead of schedule
We saved that for you. No further action required, just letting you know!
We saved that for you.
No further action required, just letting you know! Your changes will take effect immediately.
Error Flash Message
Super important. Let's the user know about high risk or high urgency messages.
Use for:
- High risk/urgency messaging
- Error/Failure
- Late/Overdue status
- Downward trends
- Unsatisfactory timelines
- Warning of irreversible actions
Seeing these banners can be stressful, use them judiciously.
Oh Crumbs! It looks like that order time is no longer available.
Oh Crumbs!
It looks like that order time is no longer available. There are 724 caterers that deliver to your address, but none are available to deliver at this time.
Warning Flash Message
Current action needs attention. Used mid-way through a process to highlight risk or to indicate that further action is required.
Use for:
- Low risk/urgency messaging
- Pending status
- Below average (but stable) trends
- Partial completion
Something bad could occur if you do that. Not going to stop you, just letting you know!
Minimum order size hasn't been met.
This caterer has a minimum order size of $50 for free delivery. A delivery charge of $10 will apply to orders under this amount.
Info Flash Message
Tips, guidance and advice. Used to highlight general information and provide more context for the surrounding content.
Use for:
- Helpful messages or usage tips
- Unread messages or notifications
- Average trends
Please note, reviews can only be written for orders fulfilled in the past 45 days.
New delivery rates are now in effect.
Give our Caterer Care team a call (555-555-5555) to learn more about how these changes affect your store.
Dismissable Flash Message
Adding an onDismiss event handler will display an icon button in the top right hand corner of the flash message that can be used to dismiss the flash message. This state is local to the component in which the flash message is displayed.
Autohide flash messages should not be used with onDismiss.
We saved that for you.
No further action required, just letting you know! Your changes will take effect immediately.
Autohide Flash Message
Adding an autohide flag will automatically hide the flash message after 5000ms, or a specified autohideDuration. Provide a onAutohide event handler for custom event handling when the flash message disappears.
For example, if an autohide flash message should only be viewed once (and not again on refresh), pass a custom function to onAutohide that handles persisting whether a message has been viewed or not.
Autohide flash messages should not be used with onDismiss.
We saved that for you.
No further action required, just letting you know! Your changes will take effect immediately.