warning

Alert & Alert Stack

Inline feedback message with severity variants.

Alert Examples

Copy-ready examples with live previews (including AlertsStack).

Basic usage (controlled)

You own `isOpen` and update it via `onOpenChange`.

Live preview

Saved successfully

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      message="Saved successfully"
      showClose
    />
  );
}

With action button

Use `actionLabel` + `onAction` for quick actions (keep labels short).

Live preview

You have unsaved changes

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      message="You have unsaved changes"
      actionLabel="Undo"
      onAction={() => console.log("undo")}
      showClose
    />
  );
}

Two-lines density + ReactNode message

Use `density='two-lines'` for long content, and pass rich content via `message`.

Live preview

This is a longer message designed to wrap into a second line for better readability.

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      density="two-lines"
      variant="info"
      message="This is a longer message designed to wrap into a second line for better readability."
      actionLabel="Details"
      onAction={() => console.log("details")}
      showClose
    />
  );
}

Live preview

Heads up: your session will expire soon. Save your work.

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      variant="warning"
      density="two-lines"
      message={
        <span>
          <strong>Heads up:</strong> your session will expire soon. Save your work.
        </span>
      }
      actionLabel="Save"
      onAction={() => console.log("save")}
      showClose
    />
  );
}

Auto-close

Close automatically after a delay.

• Auto-close only schedules when `isOpen === true`.

Live preview

This will close automatically

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      message="This will close automatically"
      autoClose
      autoCloseTimeMs={2500}
      showClose
    />
  );
}

Swipe-to-dismiss

Enable swipe to dismiss the alert (x-axis, 80px threshold).

Live preview

Swipe to dismiss

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Alert
      isOpen={open}
      onOpenChange={setOpen}
      message="Swipe me"
      swipeEnabled
      showClose
    />
  );
}

Style + variant

Use `style` for surface and `variant` for semantic tone.

Live preview

Profile updated

Something went wrong

import { useState } from "react";
import Alert from "@/_components/alert/Alert";

export default function Example() {
  const [openA, setOpenA] = useState(true);
  const [openB, setOpenB] = useState(true);

  return (
    <>
      <Alert
        isOpen={openA}
        onOpenChange={setOpenA}
        style="outlined"
        variant="success"
        message="Profile updated"
        showClose
      />

      <Alert
        isOpen={openB}
        onOpenChange={setOpenB}
        style="filled"
        variant="danger"
        message="Something went wrong"
        showClose
      />
    </>
  );
}

AlertsStack (basic)

Use AlertsStack to anchor alerts to a fixed screen position.

Live preview

Saved successfully

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";
import AlertsStack from "@/packages/ui/src/_components/alert_stack/AlertStack";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <AlertsStack placement="bottom-right">
      <Alert
        isOpen={open}
        onOpenChange={setOpen}
        message="Saved successfully"
        showClose
      />
    </AlertsStack>
  );
}

AlertsStack (multiple alerts)

Stack multiple alerts by rendering them as children.

Live preview

One

Two

Auto-close in stack

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";
import AlertsStack from "@/packages/ui/src/_components/alert_stack/AlertStack";

export default function Example() {
  const [open1, setOpen1] = useState(true);
  const [open2, setOpen2] = useState(true);

  return (
    <AlertsStack placement="bottom-right">
      <Alert isOpen={open1} onOpenChange={setOpen1} message="One" showClose />
      <Alert isOpen={open2} onOpenChange={setOpen2} message="Two" variant="success" showClose />
    </AlertsStack>
  );
}

AlertsStack (fullWidth)

Optional `fullWidth` modifier (CSS-driven).

Live preview

Full width stack (CSS-driven). Useful for mobile layouts.

import { useState } from "react";
import Alert from "@/packages/ui/src/_components/alert/Alert";
import AlertsStack from "@/packages/ui/src/_components/alert_stack/AlertStack";

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <AlertsStack placement="bottom-center" fullWidth>
      <Alert
        isOpen={open}
        onOpenChange={setOpen}
        density="two-lines"
        message="Full width stack (CSS-driven). Useful for mobile layouts."
        variant="primary"
        showClose
      />
    </AlertsStack>
  );
}

On this page

Alert Props

Alert — Props
Prop	Type	Required	Default	Description
isOpen	boolean	Yes	—	Controlled state: true shows, false hides.
onOpenChange	(nextOpen: boolean) => void	No	undefined	Recommended callback to keep external state in sync (called with false on dismiss).
style	"filled" \| "outlined"	No	"filled"	Visual surface style for the container.
variant	"neutral" \| "neutral-inverse" \| "primary" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "danger"	No	"neutral-inverse"	Semantic/tone variant.
density	"single-line" \| "two-lines"	No	"single-line"	Layout density (one line vs two lines).
message	React.ReactNode \| string	Yes	—	Main alert content.
actionLabel	string	No	undefined	If provided, renders an action button.
onAction	() => void	No	undefined	Action button callback.
showClose	boolean	No	false	If true, renders a close icon button.
onClose	() => void	No	undefined	Additional callback fired on any dismiss (auto-close, swipe, or close button).
swipeEnabled	boolean	No	false	Enables swipe-to-dismiss (default axis x, threshold 80px).
autoClose	boolean	No	false	Enables auto-close when isOpen === true.
autoCloseTimeMs	number	No	4000	Delay in ms before auto-dismiss when autoClose=true.

AlertsStack Props

AlertsStack — Props
Prop	Type	Required	Default	Description
children	React.ReactNode	Yes	—	The alerts (or any nodes) to render inside the stack.
placement	"top-left" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	No	"bottom-right"	Where the stack is anchored on screen.
fullWidth	boolean	No	false	Adds a modifier class to make the stack span the available width (CSS-driven).