Level 4

Toast notifications

Inform users of important updates or actions they need to take with toast notifications.


Your Challenge is creating a toast notification system that neatly displays custom messages. Toast notifications are useful for websites because they provide a non-intrusive way to inform users of important updates or actions they need to take.

Your Challenge is complete when:

  • The component is as close to the original design as possible

  • Elements have the correct state styles (hover, focus, etc.)

  • Notifications stack on top of each other

  • Notifications automatically disappear after so many seconds

  • Notifications can be styled quickly depending on props

  • Bonus for animating the in and out transitions

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

  • Organized Figma design file
  • Detailed desktop, tablet, and mobile layouts
  • Comprehensive design system
  • Relevant fonts, colors, SVGs, and images
  • Alternative Solutions from members
  • Straightforward quick-start guide
  • Recommended list of learning resources
  • Access to community Discord channels