ToastMessage

Use toast messages to provide updates about a process. The ToastMessage component extends Box.
Want to find out about the provider? Read ToastMessage.provider documentation
Import component
import { ToastMessage } from 'rimble-ui';

Examples

Different ways to use the ToastMessage component.
Standard toast
For when you want to just provide a quick process update like a confirmation.
Transaction started
0xAc0...e5A connected
Standard toast with subtitle
For when you want to provide more value through extra helpful information. Ask yourself when implementing your toast: is there anything else I could tell the user that would be useful?
Transaction complete
You have 4.20 ETH remaining
Switched network
You are now on Rinkeby
Icon
When you want to reinforce your message with a visual.
Welcome to my dapp
Welcome to my dapp
Link
When your Toast message has a link to support it. Note: this link should only take users to optional, supporting info.
Transaction started
Check on its progress using Etherscan
Write update here [Required]
Supporting information for update [Optional]
Process toasts

Ready-made messages to help users understand what's happening with a process they initiate, like a transaction.
Processing
Processing 0.00018 ETH payment
Success
ETH sent
You have 1.03 Ether (ETH) remaining
Failure
Payment failed
You don't have enough Ether (ETH)

Props

Prop NameTypeIs RequiredDefault ValueDescription
messagestringoptional
'Write update here [Required]'
Sets primary message text
secondaryMessagestringoptional
''
Sets secondary message text
actionHrefstringoptional
''
Sets URL for button
actionTextstringoptional
''
Sets text for button
variantenumoptional
'default'
Sets type of ToastMessage to display
Allowed values: 'default', 'success', 'failure', 'processing',
iconstringoptional
''
Sets icon to display
colorThemeenumoptional
'light'
Sets background and text color
Allowed values: 'light', 'dark',
closeElembooloptional
false
Allows ToastMessage to be closed by user

Design guidelines

Use the ToastMessage component for messages and actions that should be helpful but ultimately ignorable without any impact on what the user wants to get done.
When to use each variation
Toast with a title
For when you want to just provide a quick process update like a confirmation
Example scenarios
Transaction started
Connected to dapp
Toast with a subtitle
For when you want to provide more value through extra helpful information. Ask yourself when implementing your toast: is there anything else I could tell the user that would be useful?
Example scenarios
Payment sent
You have 4.20 ETH remaining
Transaction pending...
This might take a few minutes
Transaction failed
You didn't have enough Ether
How it works
  • ToastMessage component disappears automatically
  • Users can dismiss them manually
  • They display one at a time, so if multiple messages are necessary, each one should appear after the previous message.
Best practices
Use for non-critical information
Don't use toast messages for information that will directly impact the success of completing a task, for example a network failure. They dismiss automatically so things can be missed easily. Note: users are able to dismiss them immediately manually. For critical information, use Modal to bring that info to the user's attention.
Do
Transaction started
Don't
Switch to Rinkeby to start the transaction
Think about placement
Toasts should steer clear of navigational elements and important areas of the screen. Consider that the MetaMask browser extension could potentially hide your toast messages.
Stick to one optional link
This link should support your update and must be optional. This might be to provide further information (like linking to Etherscan) or something that can affect the process (like cancelling while your payment is in a processing state). Link copy should ideally be verb-led like "Check", "View", "Buy" or "Change".
Do
Transaction started
Check on its progress at Etherscan
Don't
Connect to start this transaction

Content

Some best practices for writing ToastMessages.
Keep things short
Toast messages are only around a short while so keep the copy short to make them readable in the time they're on screen.
Do
Transaction started
Don't
We've started your transaction
Processing messages
Keep them in the present tense and reference what's being processed to give the user reassurance that what they've initiated is happening. An ellipsis can help indicate that something's happening.
Do
Processing payment...
Don't
Processing started
Success messages
Describe what's happened and avoid generic "Success!" messages. Ethereum actions can take a while to it makes sense to remind the user of the action that has succeeded.
Do
0.4 Ether sent!
Don't
Success!
Echo the language the user interacted with to initiate the action in the success message. So if the button copy was "Send Ether":
Do
Ether sent
Don't
Ether transferred
If you explain what's happened you don't need to use terms like "successfully" which will help keep your content shorter
Do
Transaction confirmed
Don't
Transaction confirmed successfully
Failure messages
Note: it may be preferable to use alternative components like Modal to bring a transaction failure to a user's attention, as they can't be missed and provide more space for explanation.
Where possible, explain the reason for failure and offer a suggestion of what to do next. And use the action to help the user remedy the situation.
Do
Transaction failed
You didn't have enough Ether
Don't
Transaction failed
Echo the language the user interacted with to initiate the action in the failure message. So if the button copy was "Pay 0.13 Ether":
Do
Payment failed
Don't
Transaction failed
  • Modal – you may want to use this component for transaction failures as it could be considered a critical information
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

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