About this block

Dotted Border Alerts is a set of five stacked alert variants, each wrapped in a dotted outline. The variants cover the full tonal range: a neutral default, a destructive error, a green success, a yellow warning, and a blue info notice. Every alert pairs an icon on the left with a bold title and a short description beside it.

All five alerts share the same dotted frame and soft shadow, so the set reads as a coherent system. The title, description, and icon in each alert are independent, so you can swap copy and icons freely. You can also drop individual variants and use only the tones that fit your product without disturbing the others.

When to use

Reach for this block when your interface calls for feedback messages that feel approachable rather than urgent. An HR and hiring platform is a good fit: candidate status updates, reminder nudges, and onboarding tips all benefit from a tone that is informative without feeling alarming. The dotted outline reads softer than a solid border, making it a better choice than accent-border or all-sides-accent variants when the message is low stakes.

A natural flow around it on a Components page:

Before

• Basic Alerts to establish a plain, no-frills baseline before introducing styled border variants
• Badges to label the section or status context the alerts sit inside

After

• Dashed Border Alerts if you want to show a lighter sketch-like alternative in the same group
• Cards to wrap alert sets inside a broader content container

What you can display

Each variant maps to a distinct feedback tone and can carry any short message your product needs. A few common uses:

• Candidate status notices. Drop success and info alerts onto a hiring pipeline page to confirm actions like interview scheduling or offer sends.
• Onboarding reminders. Use the warning or default alert to surface incomplete profile steps or pending tasks in a friendly, non-blocking way.
• Form validation summaries. Place the destructive and warning variants at the top of a form to summarize errors or required fields before submission.

Tip: limit each alert to one or two sentences in the description so the dotted frame stays light and the notice reads at a glance.