1. Docs
2. Components
3. Feedback
4. Alerts

Alerts 1.2.2

Provide contextual feedback with the .velin-alert component. Alerts support four semantic variants, optional icons, titles, and a dismissible close button. Deutsch: Hinweise

When to use

• Persistent, in-flow status next to the content it describes (form banners, page notices, inline warnings).
• When the message should remain visible until the user dismisses it or navigates away.

When not

• Transient, non-blocking feedback after an action — use Toasts.
• Blocking confirmations — use Dialog or Modal.
• There is no <velin-alert> web component; use the CSS pattern on this page.

Basic Example

<div class="velin-alert velin-alert--info" role="alert">
  <div class="velin-alert__content">This is an informational alert.</div>
</div>

<div class="velin-alert velin-alert--success" role="alert">
  <div class="velin-alert__content">Action completed successfully!</div>
</div>

<div class="velin-alert velin-alert--warning" role="alert">
  <div class="velin-alert__content">Please check your input.</div>
</div>

<div class="velin-alert velin-alert--danger" role="alert">
  <div class="velin-alert__content">Something went wrong.</div>
</div>

With Icon & Title

<div class="velin-alert velin-alert--info" role="alert">
  <velin-icon name="info" size="20" class="velin-alert__icon"></velin-icon>
  <div class="velin-alert__content">
    <div class="velin-alert__title">Heads up!</div>
    This alert has an icon and a bold title for emphasis.
  </div>
</div>

Dismissible

Add a .velin-alert__close button. A small script removes the alert on click.

<div class="velin-alert velin-alert--warning" role="alert">
  <div class="velin-alert__content">You can dismiss me!</div>
  <button class="velin-alert__close" aria-label="Close"
    onclick="this.closest('.velin-alert').remove()">&times;</button>
</div>

Accessibility

• Use role="alert" for urgent messages that must interrupt; use role="status" for quieter, polite announcements.
• Dismiss controls need an accessible name (e.g. aria-label="Close").
• Do not rely on colour alone — pair variants with icons or clear titles for colour-blind users.
• Keep important instructions in the document flow; alerts are not a substitute for field-level errors (see Form summary).

CSS Variables / classes

Variants: .velin-alert--info, --success, --warning, --danger. Structure: .velin-alert__icon, __content, __title, __close.

Best practices & pitfalls

• Prefer short, actionable copy; link to the next step when recovery is needed.
• Dismissible alerts need a small script (or framework handler) — CSS alone does not remove the node.
• Do not invent Bootstrap .alert-* class names; stick to .velin-alert--*.

Related

• Toasts — stacked, transient notifications
• Form summary — submit-time error list
• Announcer — live region utility