---
title: Alert
description: An alert box that displays a notification message to the user.
links:
  source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Alert/Alert.tsx
---

<PreviewComponent name="alert/preview" />

### Usage

```tsx
import { Alert } from "@lemonsqueezy/wedges";
```

```tsx showLineNumbers
<Alert title="Alert title">Alert content</Alert>
```

### API Reference

<PropsTable
  content={[
    [{ value: "variant" }, { value: '"inline" | "expanded"' }, { value: '"inline"' }],
    [{ value: "title" }, { value: "ReactNode" }, {}],
    [{ value: "children", description: "Used as a secondary text." }, { value: "ReactNode" }, {}],
    [{ value: "after" }, { value: "ReactNode" }, {}],
    [{ value: "before" }, { value: "ReactNode" }, {}],
    [
      { value: "color" },
      { value: '"gray" | "primary" | "info" | "success" | "error" | "warning"' },
      {},
    ],
    [
      {
        value: "closable",
        description:
          "Is the alert closable? If true, a close button will be displayed and when clicked on it will hide the alert element.",
      },
      { value: "boolean" },
      { value: "false" },
    ],
    [
      {
        value: "onClose",
        description:
        "Event handler called when the close button is clicked. It can be prevented by calling `event.preventDefault`."
      },
      { value: "MouseEventHandler<HTMLButtonElement> | never" },
      {},
    ],

]}
/>

### Examples

The following example shows `expanded` variant with `color` set to `primary` and `closable` set to `true` with `onClose` callback provided.

<PreviewComponent name="alert/example-1" />

More examples:

<PreviewComponent name="alert/example-2" />