Flash
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
This is a primary alert with an example link. Give it a click if you like.
Info
This is a primary alert with an example link. Give it a click if you like.
Success
This is a primary alert with an example link. Give it a click if you like.
Warning
This is a primary alert with an example link. Give it a click if you like.
Danger
This is a primary alert with an example link. Give it a click if you like.
Props
border
'1'
borderRadius
1
p
'3'
theme
theme
variant
'base'
width
'100%'
Styled System Props
Flash uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled 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.
Switch to the Main Ethereum network
Connected!
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.
Stick to one call to action
No funds for transactions fees
Wrong network and insufficient funds!
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
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
Warning
If there's something that might prevent a user from achieving their task.
Example scenarios
Slow transactions expected
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, use a Modal.
Example scenarios
