Alerts

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

Basic Example

This is an informational alert.

Action completed successfully!

Please check your input.

Something went wrong.

<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

Heads up!

This alert has an icon and a bold title for emphasis.

<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.

You can dismiss me!

<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

Always add role="alert" so screen readers announce the message immediately.
Use aria-label="Close" on dismiss buttons.
Choose an appropriate variant to convey intent through colour (and reinforce with icons for colour-blind users).

CSS Variables

Variable	Description
`--velin-color-info-subtle`	Background for `.velin-alert--info`
`--velin-color-info`	Border for `.velin-alert--info`
`--velin-color-success-subtle`	Background for `.velin-alert--success`
`--velin-color-success`	Border for `.velin-alert--success`
`--velin-color-warning-subtle`	Background for `.velin-alert--warning`
`--velin-color-warning`	Border for `.velin-alert--warning`
`--velin-color-danger-subtle`	Background for `.velin-alert--danger`
`--velin-color-danger`	Border for `.velin-alert--danger`
`--velin-radius-md`	Border radius
`--velin-space-3`	Gap between icon and content
`--velin-space-4`	Padding