Skip to main content

Alert

Alerts communicate information, success, warnings, or errors within a page.

Import

import { Alert } from '@vortexlabs/vortex';
import type { AlertProps } from '@vortexlabs/vortex';

Other links

Storybook
Scheduled maintenance The dashboard will be unavailable briefly.
<Alert
  title="Scheduled maintenance"
  tone="info"
  layout="inline"
>
  The dashboard will be unavailable briefly.
</Alert>

Features

  • Supports six tones for notices and feedback.
  • Supports inline and stacked layouts.
  • Can contain a title, message, icon, and action controls.
  • Supports local, controlled, or persistent dismissal.
Reference Links
WAI-ARIA alert pattern

Tone

Use tone to match the message. The default is neutral; error also changes the announcement role from status to alert.

Workspace notice Your team has 12 members.
New workspace Invite your team to get started.
Scheduled maintenance Service resumes at 03:00 UTC.
Upload complete All files are ready to share.
Storage almost full You have 1 GB remaining.
import { Alert, Stack } from "@vortexlabs/vortex";

<Stack gap={3}>
  <Alert tone="neutral" title="Workspace notice">Your team has 12 members.</Alert>
  <Alert tone="primary" title="New workspace">Invite your team to get started.</Alert>
  <Alert tone="info" title="Scheduled maintenance">Service resumes at 03:00 UTC.</Alert>
  <Alert tone="success" title="Upload complete">All files are ready to share.</Alert>
  <Alert tone="warning" title="Storage almost full">You have 1 GB remaining.</Alert>
  <Alert tone="error" title="Upload failed">Check your connection and try again.</Alert>
</Stack>

Layout

The default inline layout places the title and message in the same text block. Use stacked to put the message below the title.

Scheduled maintenance The dashboard will be unavailable from 02:00 to 03:00 UTC.
Scheduled maintenance
The dashboard will be unavailable from 02:00 to 03:00 UTC.
<Stack gap={4}>
  <Alert layout="inline" title="Scheduled maintenance">
    The dashboard will be unavailable from 02:00 to 03:00 UTC.
  </Alert>
  <Alert layout="stacked" title="Scheduled maintenance">
    The dashboard will be unavailable from 02:00 to 03:00 UTC.
  </Alert>
</Stack>

Icons and Actions

Pass an icon through icon and links or buttons through actionsSlot. Inline actions move below the content on smaller screens; stacked actions stay below it.

Start with a working app. Follow the setup guide to load your theme and provider.
Open Quick Start
import { CircleInformation } from "@vortexlabs/vortex-icons";
import { Alert, Link } from "@vortexlabs/vortex";

<Alert
  tone="info"
  icon={<CircleInformation />}
  title="Start with a working app."
  actionsSlot={<Link size="sm" href="/docs/quick-start">Open Quick Start</Link>}
>
  Follow the setup guide to load your theme and provider.
</Alert>

Dismissal

Set dismissible to show a close button. Closing removes the alert until it is mounted again.

New keyboard shortcuts You can now navigate your workspace from the keyboard.
<Alert dismissible tone="info" title="New keyboard shortcuts">
  You can now navigate your workspace from the keyboard.
</Alert>

Controlled Dismissal

Use persist="custom" inside the dismissal configuration when your component owns the state. Update dismissed in onClose; setting it back to false restores the alert.

Changes saved. Your workspace is up to date.
"use client";

import { useState } from "react";
import { Alert, Button, Stack } from "@vortexlabs/vortex";

export const DismissibleNotice = () => {
  const [dismissed, setDismissed] = useState(false);

  return (
    <Stack gap={3} align="start" width="100%">
      <Alert
        tone="success"
        title="Changes saved."
        dismissible={{
          persist: "custom",
          dismissed,
          onClose: () => setDismissed(true),
        }}
      >
        Your workspace is up to date.
      </Alert>
      <Button
        size="sm"
        variant="secondary"
        disabled={!dismissed}
        onClick={() => setDismissed(false)}
      >
        Show notice again
      </Button>
    </Stack>
  );
};

To remember a dismissal across visits, use a unique storage key. The alert reads and writes that key in localStorage.

<Alert
  title="New keyboard shortcuts"
  dismissible={{ persist: "localStorage", storageKey: "shortcuts-notice-v1" }}
>
  You can now navigate your workspace from the keyboard.
</Alert>

Accessibility

Key
Description
Error alerts use role="alert"; other tones use role="status". Choose the tone to match the urgency of the message.
The built-in close button is named Close. Give any supplied action controls meaningful visible text or an accessible name.
EnterSpace
Activate the focused close button.