Pulse Border Alerts
Alerts with a border that gently pulses to catch attention over time. Use for live updates, countdowns, or urgent notices that should not be missed.
Alerts with a border that gently pulses to catch attention over time. Use for live updates, countdowns, or urgent notices that should not be missed.
Search blocks by description or jump to a page.
Pulse Border Alerts stacks five alert variants in a vertical column. Each alert shows a title and a short description inside a soft shadowed container, and a pseudo-element border on top of that container repeats a gentle pulse animation so the outline breathes continuously. The five tones are default, destructive, success, warning, and info. The destructive, success, warning, and info variants each carry a matching status icon beside the title so the tone is clear at a glance even before reading the text.
The five alerts are independent of each other. You can keep only the variants your interface needs, swap in your own titles and descriptions, or reorder them to match the priority of the messages on your page. The animation runs on every alert in the set, so removing one does not break the rhythm of the others.
Reach for this block when a notice must hold attention beyond the moment it appears. On a logistics and delivery platform the pulsing border suits a shipment exception alert, a carrier delay warning, or a time-sensitive pickup confirmation where a static notice might be missed. It is a stronger choice than a plain outlined or elevated alert when the content is live or time-bound, because the motion signals that something is still unresolved or actively in progress.
A natural flow around it on a Components page:
Before
After
Any time-sensitive or live status message benefits from the animated border. A few specific fits:
Tip: limit animated alerts to one or two per screen at a time so the pulsing effect stays meaningful rather than becoming background noise.