# Inline alert
> Inline alert in four tones with a pixel icon and a glowing stripe; dismissing scatters the stripe and collapses the alert.
- React: `import { PxAlert } from "@/components/lumesec/px-alert"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-alert.json
- Page: https://elements.lumesec.ai/components/pixel-ui/alert



Live preview: https://elements.lumesec.ai/view/px-alert

Demo source:

```tsx
"use client";

import * as React from "react";

import { PxAlert } from "@/components/lumesec/px-alert";

const controlButton =
  "h-[30px] rounded-lg border border-border bg-card px-[11px] font-[inherit] text-[12.5px] font-medium text-foreground hover:border-[color-mix(in_srgb,var(--lumesec)_50%,var(--border))]";

export default function PxAlertDemo() {
  const [usageOpen, setUsageOpen] = React.useState(true);
  const [syncOpen, setSyncOpen] = React.useState(true);

  return (
    <div className="grid w-full max-w-[380px] gap-[14px]">
      <PxAlert type="info" heading="New model available">
        Opus 5.5 is now the default for new chats.
      </PxAlert>
      <PxAlert type="warning" heading="Usage at 85%" dismissible open={usageOpen} onOpenChange={setUsageOpen}>
        You’ve used most of this week’s limit.
      </PxAlert>
      <PxAlert type="error" heading="Sync failed" dismissible open={syncOpen} onOpenChange={setSyncOpen}>
        We couldn’t reach Google Drive. Check the connection.
      </PxAlert>
      <div className="flex flex-wrap justify-center gap-1.5">
        <button
          type="button"
          className={controlButton}
          onClick={() => {
            setUsageOpen(true);
            setSyncOpen(true);
          }}
        >
          Show dismissed
        </button>
      </div>
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-alert
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-alert.json
```

## Usage

React:

```tsx
import { PxAlert } from "@/components/lumesec/px-alert";

export function Example() {
  return (
    <PxAlert type="warning" heading="Usage at 85%" dismissible>
      You’ve used most of this week’s limit.
    </PxAlert>
  );
}
```

## Behaviour

Info, success, warning and error, each with a pixel icon and a glowing stripe. Dismissing scatters the stripe and collapses the alert.

## API reference

### Props

Also accepts every prop of `<div>` (`React.ComponentProps<"div">`), spread onto the root element.

| Prop           | Type                                          | Default  | Description                                                                                                        |
| -------------- | --------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ |
| `open`         | `boolean`                                     | —        | Controlled visibility. Use with `onOpenChange`; turning it off plays the dismiss animation before the alert hides. |
| `defaultOpen`  | `boolean`                                     | `true`   | Initial visibility when uncontrolled.                                                                              |
| `type`         | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Colour, icon and ARIA role.                                                                                        |
| `heading`      | `React.ReactNode`                             | —        | Bold title above the message; left out when empty.                                                                 |
| `children`     | `React.ReactNode`                             | —        | The message.                                                                                                       |
| `dismissible`  | `boolean`                                     | `false`  | Shows a dismiss button.                                                                                            |
| `onOpenChange` | `(open: boolean) => void`                     | —        | Called with `false` when the dismiss button is pressed.                                                            |

### Ref

`ref` points at the root `HTMLDivElement`.

## Accessibility

* `error` and `warning` alerts have `role="alert"`; `info` and `success` alerts have `role="status"`.
* The dismiss button is a native button labelled "Dismiss".
* The icon and stripe are drawn on an `aria-hidden` canvas; the tone is not conveyed as text.
* Once dismissed the root is `hidden` and leaves the accessibility tree.
* Reduced motion: the stripe glow stops, and dismissing hides the alert at once without scattering pixels.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--lumesec`, `--lumesec-shine`, `--lumesec-success`, `--lumesec-warning`, `--destructive`, `--border`, `--card`, `--foreground` and `--muted-foreground`.

## Notes

* Uncontrolled alerts stay hidden after dismissal; control `open` to show one again.
* The root carries `data-state="open"` or `data-state="closed"` and `data-type`.