Alert — ARC UI

Components

Alert

feedback

hybrid

<arc-alert>

Overview

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

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

Features

Four semantic variants — info, success, warning, and error — with distinct colour 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';

<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: `
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  `,
})
export class MyComponent {}

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

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

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

<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

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Controls the semantic colour palette and icon. Use "info" for neutral guidance, "success" for confirmations, "warning" for caution states, and "error" for failures or blocking issues.
`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-dismiss" 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.
`compact`	`boolean`	`false`	Reduces padding and font sizes for inline or space-constrained usage.

Events

Event	Description
`arc-dismiss`	Fired when a dismissible alert is closed