Flash

Use the Flash component for delivering important messages to your users while allowing them to continue interacting with the rest of the page. For example, you may want to let users know they're on the wrong network but allow them to continue browsing until they try to connect. The Flash renders a responsive box-model layout component. Inherits props from Box component.
Import component
import { Flash } from 'rimble-ui';

Examples

Different ways to use the Flash component.
Default
Flash default This is a primary alert with an example link. Give it a click if you like.
Info
Flash "info" This is a primary alert with an example link. Give it a click if you like.
Success
Flash "success" This is a primary alert with an example link. Give it a click if you like.
Warning
Flash "success" This is a primary alert with an example link. Give it a click if you like.
Danger

Props

Prop NameTypeIs RequiredDefault ValueDescription
variantenumoptional
'base'
Sets the colors of the background, text and links
Allowed values: 'base', 'success', 'warning', 'danger', 'info',
themeoptional
theme
poptional
'3'
borderoptional
'1'
borderRadiusoptional
1
widthoptional
'100%'
Styled System Props
Flash uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.

Accessibility

  • Critical and warning banners have a role="alert"
  • All other banners have a role="status"
  • Banner containers have a tabindex="0" and display a visible keyboard focus indicator.
  • Banners use aria-describedby to describe their purpose to assistive technologies when they're announced or receive focus. All of the banner content is used for the aria-describedby.

Design guidelines

Some best practices for using Flash in your product.
Use for persistent information
Use the Flash banner if the information you want to get across remains relevant until a certain action has taken place, like errors in a form. Or if it is relevant for a certain time period like planned maintenance. Users will still be able to interact with the surrounding page, so if it's critical information that needs to be addressed, use a Modal.
Do
Don't

Connected!

Your Ethereum account is now connected to my dapp.
Stick to one call to action
Flash banners should have a single purpose or message so should only contain a maximum of one call to action. Multiple messages in a banner will both cause confusion and add unnecessary word count. It's better to separate them into two banners if you need to say two things and let the user address them separately.
Do
Don't

When to use each variation

Success

When you want to let the user know that something has been successful. You may want to use a ToastMessage, but Flash is a good option if you want your user to follow up the success with an action.
Example scenarios

Cryptokitty received

Kitty #12345 is now yours! Want to take a look?
View Cryptokitty
Info

When there's some important info in relation to the section (whole dapp, page, card etc.) in which you put the Flash banner. Or if you want to provide advice.
Example scenarios

Now accepting DAI

You can now use DAI in our online store

Ether is booming!

ETH price surges show no sign of letting up.
See rates
Warning

If there's something that might prevent a user from achieving their task.
Example scenarios
Danger

If there's something preventing a user from achieving key tasks, like a service outage or an incorrect network. If you want to prevent them from doing anything in these situations, used a Modal.
Example scenarios
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute