Alerts and Toasts
Simple Alert
Best for
Confirmations, quick status, anything that should self-dismiss
Anatomy
Status icon · title · dismiss · a running close-countdown bar, paused on hover or focus
Insert your alert title here!
This message will close in 6 seconds.
Insert your alert title here!
This message will close in 6 seconds.
Alert with Actions
Best for
Update prompts, confirmations that need a choice, background job results
Anatomy
Status icon · title · Update pill · dismiss · description · Primary/Secondary actions · countdown bar
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus. Arcu eleifend feugiat at tincidunt sit. Diam sit in id duis libero varius netus ultrices eget.
This message will close in 6 seconds.
Expandable Alert
Best for
Longer notices that default to a preview, with an option to keep reading
Anatomy
Status icon · title · expand chevron · dismiss · a preview description that pins open, hiding the chevron and countdown
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus. Arcu eleifend feugiat at tincidunt sit. Diam sit in id duis libero varius netus ultrices eget.
This message will close in 6 seconds.
Toast
Best for
Transient system messages, background status, compact banners
Anatomy
Intent tabs · Neutral/Solid/Tint appearance toggle · a rounded/pill shape toggle · status swatch · label · Update pill · dismiss
Insert your alert title here!
Attachment Toast
Best for
File/attachment notices, richer background-job results
Anatomy
Intent tabs · Neutral/Solid/Tint appearance toggle · file-type icon · title · description · Primary/Secondary link actions · dismiss
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Alerts and Toasts
Simple Alert
Best for
Confirmations, quick status, anything that should self-dismiss
Anatomy
Status icon · title · dismiss · a running close-countdown bar, paused on hover or focus
Insert your alert title here!
This message will close in 6 seconds.
Insert your alert title here!
This message will close in 6 seconds.
Alert with Actions
Best for
Update prompts, confirmations that need a choice, background job results
Anatomy
Status icon · title · Update pill · dismiss · description · Primary/Secondary actions · countdown bar
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus. Arcu eleifend feugiat at tincidunt sit. Diam sit in id duis libero varius netus ultrices eget.
This message will close in 6 seconds.
Expandable Alert
Best for
Longer notices that default to a preview, with an option to keep reading
Anatomy
Status icon · title · expand chevron · dismiss · a preview description that pins open, hiding the chevron and countdown
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus. Arcu eleifend feugiat at tincidunt sit. Diam sit in id duis libero varius netus ultrices eget.
This message will close in 6 seconds.
Toast
Best for
Transient system messages, background status, compact banners
Anatomy
Intent tabs · Neutral/Solid/Tint appearance toggle · a rounded/pill shape toggle · status swatch · label · Update pill · dismiss
Insert your alert title here!
Attachment Toast
Best for
File/attachment notices, richer background-job results
Anatomy
Intent tabs · Neutral/Solid/Tint appearance toggle · file-type icon · title · description · Primary/Secondary link actions · dismiss
Insert your alert title here!
Lorem ipsum dolor sit amet consectetur. Pellentesque sagittis congue scelerisque ac neque vulputate varius duis purus.
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.