⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Toast Message

Toast Message

Toast messages provide users with immediate feedback after an action. They can be dismissed by users or disappear on their own.

Usage

  • Toast messages are used to inform users about important status changes and updates.
  • Toast messages convey information effectively.
  • Each status is associated with a specific colour and icon to ensure a consistent and universal user experience.

Anatomy

The tab component is encapsulated within a container, providing space for a status icon as well as a descriptive status label, ensuring comprehensive visual representation and clear communication of status information

Variant

Toast message variants comes with with title and without title.

Without Title

With Title

States

Toast Messages can have neutral, warning, success, and danger states, with or without a title.

Neutral Toast Message

Warning Toast Message

Success Toast Message

Danger Toast Message

Specifications

Structure and spacing measurements for toast message.

Live Demo

The Toast Message is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Timeline
Tooltip

Helix - HDFC Life 2025