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
<ToastMessage message={"Transaction started"} />
<ToastMessage message={"Transaction started"} />
Copy code

0xAc0...e5A connected
<ToastMessage message={"0xAc0...e5A connected"} colorTheme={"dark"} my={3} />
<ToastMessage message={"0xAc0...e5A connected"} colorTheme={"dark"} my={3} />
Copy code

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
<ToastMessage
  message={"Transaction complete"}
  secondaryMessage={"You have 4.20 ETH remaining"}
  my={3}
/>
<ToastMessage
  message={"Transaction complete"}
  secondaryMessage={"You have 4.20 ETH remaining"}
  my={3}
/>
Copy code

Switched network
You are now on Rinkeby
<ToastMessage
  message={"Switched network"}
  secondaryMessage={"You are now on Rinkeby"}
  colorTheme={"dark"}
  my={3}
/>
<ToastMessage
  message={"Switched network"}
  secondaryMessage={"You are now on Rinkeby"}
  colorTheme={"dark"}
  my={3}
/>
Copy code

Icon

When you want to reinforce your message with a visual.

Welcome to my dapp
<ToastMessage message={"Welcome to my dapp"} icon={"Mood"} my={3} />
<ToastMessage message={"Welcome to my dapp"} icon={"Mood"} my={3} />
Copy code

Welcome to my dapp
<ToastMessage
  message={"Welcome to my dapp"}
  icon={"Mood"}
  my={3}
  colorTheme={"dark"}
/>
<ToastMessage
  message={"Welcome to my dapp"}
  icon={"Mood"}
  my={3}
  colorTheme={"dark"}
/>
Copy code

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
Check
<ToastMessage
  message={"Transaction started"}
  secondaryMessage={"Check on its progress using Etherscan"}
  my={3}
  actionText={"Check"}
  actionHref={"#!"}
/>
<ToastMessage
  message={"Transaction started"}
  secondaryMessage={"Check on its progress using Etherscan"}
  my={3}
  actionText={"Check"}
  actionHref={"#!"}
/>
Copy code

Write update here [Required]
Supporting information for update [Optional]
Link
<ToastMessage
  message={"Write update here [Required]"}
  secondaryMessage={"Supporting information for update [Optional]"}
  icon={"InfoOutline"}
  my={3}
  actionText={"Link"}
  actionHref={"#!"}
  colorTheme={"dark"}
/>
<ToastMessage
  message={"Write update here [Required]"}
  secondaryMessage={"Supporting information for update [Optional]"}
  icon={"InfoOutline"}
  my={3}
  actionText={"Link"}
  actionHref={"#!"}
  colorTheme={"dark"}
/>
Copy code

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
<ToastMessage.Processing my={3} message={"Processing 0.00018 ETH payment"} />
<ToastMessage.Processing my={3} message={"Processing 0.00018 ETH payment"} />
Copy code

Success

ETH sent
You have 1.03 Ether (ETH) remaining
<ToastMessage.Success
  my={3}
  message={"ETH sent"}
  secondaryMessage={"You have 1.03 Ether (ETH) remaining"}
/>
<ToastMessage.Success
  my={3}
  message={"ETH sent"}
  secondaryMessage={"You have 1.03 Ether (ETH) remaining"}
/>
Copy code

Failure

Payment failed
You don't have enough Ether (ETH)
Buy ETH
<ToastMessage.Failure
  my={3}
  message={"Payment failed"}
  secondaryMessage={"You don't have enough Ether (ETH)"}
  actionText={"Buy ETH"}
  actionHref={"#!"}
/>
<ToastMessage.Failure
  my={3}
  message={"Payment failed"}
  secondaryMessage={"You don't have enough Ether (ETH)"}
  actionText={"Buy ETH"}
  actionHref={"#!"}
/>
Copy code

Props

''

''

false

'light'

''

'Write update here [Required]'

''

'default'

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

Toast with a title

For when you want to just provide a quick process update like a confirmation

Example scenarios

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

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

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.

Use for non-critical information

For critical information, use Modal to bring that info to the user's attention.

Stick to one optional link

Content

Some best practices for writing ToastMessages.

Keep things short

Processing messages

Success messages

Failure messages

Related components

• Modal – you may want to use this component for transaction failures as it could be considered a critical information