Skip to content
LuoForge/Tungsten
Components/Alert·

Alert

since v0.1.0

Inline feedback banner — use for errors, warnings, and confirmations.

Forwards ref to the root <div>.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Alert } from '@hey-mike/tungsten';
import { Alert } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/alert/page.tsx

import { Alert, Button } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function AlertSnapshot() {
  return (
    <VariantGrid
      title="Alert"
      variants={[
        { label: 'info', node: <Alert variant="info">Heads up — something to know.</Alert> },
        { label: 'success', node: <Alert variant="success">Saved successfully.</Alert> },
        { label: 'warning', node: <Alert variant="warning">This action is rate-limited.</Alert> },
        { label: 'error', node: <Alert variant="error">Failed to load.</Alert> },
        {
          label: 'with-title',
          node: (
            <Alert variant="warning" title="Rate limited">
              You&apos;ve reached the limit. Wait 60 seconds and try again.
            </Alert>
          ),
        },
        {
          label: 'with-actions',
          node: (
            <Alert
              variant="error"
              title="Upload failed"
              actions={
                <>
                  <Button size="sm" variant="destructive">
                    Retry
                  </Button>
                  <Button size="sm" variant="ghost">
                    Dismiss
                  </Button>
                </>
              }
            >
              The file could not be uploaded. Check your connection and try again.
            </Alert>
          ),
        },
      ]}
    />
  );
}

import { Alert, Button } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function AlertSnapshot() {
  return (
    <VariantGrid
      title="Alert"
      variants={[
        { label: 'info', node: <Alert variant="info">Heads up — something to know.</Alert> },
        { label: 'success', node: <Alert variant="success">Saved successfully.</Alert> },
        { label: 'warning', node: <Alert variant="warning">This action is rate-limited.</Alert> },
        { label: 'error', node: <Alert variant="error">Failed to load.</Alert> },
        {
          label: 'with-title',
          node: (
            <Alert variant="warning" title="Rate limited">
              You&apos;ve reached the limit. Wait 60 seconds and try again.
            </Alert>
          ),
        },
        {
          label: 'with-actions',
          node: (
            <Alert
              variant="error"
              title="Upload failed"
              actions={
                <>
                  <Button size="sm" variant="destructive">
                    Retry
                  </Button>
                  <Button size="sm" variant="ghost">
                    Dismiss
                  </Button>
                </>
              }
            >
              The file could not be uploaded. Check your connection and try again.
            </Alert>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Alert />.

PropTypeDefaultDescription
variant"error" | "warning" | "success" | "info"info—
size"md" | "sm"—md (default) is the full banner; sm is a compact single-line variant.
titlestring——
eyebrowReactNode—Optional mono-caps status eyebrow rendered above the title (e.g. "ERROR").
actionsReactNode——
iconReactElement<unknown, string | JSXElementConstructor<any>> | null—Override the default status icon. Omit to use the default status icon; pass null to suppress the icon entirely.
onDismiss(() => void)—When provided, renders a close button that calls this on click. The Alert is controlled — it does not self-hide; the consumer removes it in response. Omit for a non-dismissible Alert (the default; no button rendered).

Source