Alert

Contextual alert banner with four semantic variants and optional dismiss button for delivering timely, prominent feedback to users.

Components

Alert

feedback

hybrid

<arc-alert>

Overview

Alerts communicate important contextual messages to users without interrupting their workflow. They appear inline within the page content and draw attention through color-coded variants that convey meaning at a glance — informational, success, warning, or error. Use alerts when the user needs to be aware of a state change, a completed action, or a potential problem. Unlike toasts, alerts persist on the page until the user dismisses them or navigates away, making them ideal for messages that require acknowledgement or continued visibility. Alerts support an optional heading for a scannable summary and a dismiss button so users can clear the message once they have read it. The body slot accepts any inline or block content, so you can include links, lists, or follow-up actions inside the alert.

Guidelines

When to use

Use the variant that matches the semantic meaning of the message (e.g. success for confirmations, error for failures)
Keep alert text concise — lead with the outcome, then provide a brief explanation
Include a heading when the alert body is longer than a single sentence
Make alerts dismissible when the information is transient and does not need to persist
Place alerts near the content they relate to, or at the top of the page for global messages

When not to use

Do not use alerts for passive, background information — use a callout or badge instead
Do not stack more than two or three alerts at a time; consolidate or use a toast queue
Do not use the error variant for warnings — reserve it for genuine failures
Do not rely solely on color to convey meaning; the heading and text should stand alone
Do not make every alert dismissible — persistent alerts are appropriate for critical errors

Features

Four semantic variants — info, success, warning, and error — with distinct color palettes
Optional heading for a concise, scannable summary above the body text
Dismissible mode adds a close button and fires an event on dismiss
Accessible by default with appropriate ARIA role and live-region semantics
Slots for custom body content including links, lists, or action buttons
Smooth enter/exit transitions when dismissed

Preview

Your changes are now live on production.

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-alert variant="success" heading="Deployment complete" dismissible>
  Your changes are now live on production.
</arc-alert>

import { Alert } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

<script setup>
import { Alert } from '@arclux/arc-ui-vue';
</script>

<template>
  <Alert variant="success" heading="Deployment complete" dismissible>
    Your changes are now live on production.
  </Alert>
</template>

<script>
  import { Alert } from '@arclux/arc-ui-svelte';
</script>

<Alert variant="success" heading="Deployment complete" dismissible>
  Your changes are now live on production.
</Alert>

import { Component } from '@angular/core';
import { Alert } from '@arclux/arc-ui-angular';

@Component({
  imports: [Alert],
  template: `
    <arc-alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </arc-alert>
  `,
})
export class MyComponent {}

import { Alert } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

import { Alert } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

<!-- arc-alert is interactive — requires JS -->
<arc-alert></arc-alert>

<!-- arc-alert is interactive — requires JS -->
<arc-alert></arc-alert>

API

variant 'info' | 'success' | 'warning' | 'error' ='info': Controls the semantic color palette and icon. Use "info" for neutral guidance, "success" for confirmations, "warning" for caution states, and "error" for failures or blocking issues.
density 'default' | 'compact' ='default': Visual density. 'compact' reduces padding and font sizes for inline or space-constrained usage.
dismissible boolean =false: When true, renders a close button in the top-right corner. Clicking it removes the alert from the DOM and fires an "arc-close" event that parent components can listen to.
heading string ='': Optional bold heading rendered above the body slot. Use it for a scannable one-line summary so users can quickly gauge the alert's importance before reading the full message.

Events

arc-close: Fired when a dismissible alert is closed

Alert

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight