> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Alert
> Displays a contextual feedback message to the user.
```tsx theme={null}
import { Alert } from "@fanvue/ui";
import type { AlertProps, AlertVariant } from "@fanvue/ui";
```
## Examples
## Interactive Dismissible
```tsx theme={null}
import { useState } from "react";
import { Alert } from "@fanvue/ui";
function Example() {
const [visible, setVisible] = useState(true);
return (
{visible ? (
setVisible(false)}>
Click the close button to dismiss this alert. It will disappear.
) : (
Alert dismissed!{" "}
)}
);
}
```
## With Link
The `action` slot is composable: pass any element and it receives the variant-appropriate link styling via Radix `Slot`. For a Next.js app, pass a router-aware link instead of a plain anchor, e.g. `action={See what's new}` where `Link` is imported from `next/link`.
```tsx theme={null}
import { Alert } from "@fanvue/ui";
Learn more}
>
This is the body text for an info in-app alert with a link to more detail.
```
## All Variants
```tsx theme={null}
import { Alert } from "@fanvue/ui";
const VARIANTS = ["info", "success", "warning", "error", "neutral"] as const;
{VARIANTS.map((variant) => (
{variant}
Body text only.
Body text with a title above it.
Body text with a close button.
More}>
Title, close button and an action link.
))}
```
## Info Closable
```tsx theme={null}
import { useState } from "react";
import { Alert } from "@fanvue/ui";
function Example() {
const [visible, setVisible] = useState(true);
return visible ? (
setVisible(false)}>
This is a closable info alert.
) : (
Alert dismissed!{" "}
);
}
```
## With Link Closable
```tsx theme={null}
import { useState } from "react";
import { Alert } from "@fanvue/ui";
function Example() {
const [visible, setVisible] = useState(true);
return visible ? (
Renew now}
onClose={() => setVisible(false)}
>
Your subscription will expire in 3 days.
) : (
Alert dismissed!{" "}
);
}
```
## Props
## Alert
Displays a contextual feedback message to the user.
Supports `info`, `success`, `warning`, `error`, and `neutral` variants with a default icon per variant, optional title, description, dismiss button, and an optional composable `action` slot.
Each variant renders a default icon automatically. Pass a custom `icon` to override, or `icon={null}` to hide the icon entirely.
Only the title and description live inside the `role="alert"` live region. The icon, `action`, and close button are rendered outside it so interactive controls are announced and navigated consistently by screen readers.
Composable action slot rendered beneath the description, outside the `role="alert"` live region. Pass your own element (an ``, a `next/link` ``, or a `
Whether to show the close button.
Accessible label for the close button.
Custom icon override. Pass `null` to hide the icon entirely. Each variant shows a default icon when left `undefined`.
Callback fired when the close button is clicked.
Optional title text displayed in bold above the description.
Visual style variant of the alert.
## Exported types
Also exported from `@fanvue/ui`: `AlertProps`, `AlertVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)