Hudl Design System

Last Modified:August 31, 2017

Toasts

Uniform provides styling and markup for toasts, the small notifications that appear on screen to provide feedback related to a user’s action, such as uploading video.

Using the React Component

Rather than hand coding toasts yourself, we suggest you let Uniform-UI-Components do the heavy lifting for you. Otherwise, you’re writing more JavaScript, and copy pasting HTML.

# Toast

Toasts include an icon to signify what type of feedback the user is receiving, a short text message to describe the feedback, and a dismiss button to remove the toast. Provided the toast is not critical, it will automatically dismiss after a short timed interval

Uniform-UI-Component

Documentation →

<Toast message="This toast is not very tasty"/>

# Toast Types

There are four types of toasts available: Information (default), Warning, Success and Critical.

Uniform-UI-Component

Documentation →

<Toast message="This toast is not tasty"/>
<Toast message="This toast is not tasty" type="warning"/>
<Toast message="This toast is not tasty" type="success"/>
<Toast message="This toast is not tasty" type="critical"/>