Alert
A prominent message for important contextual information.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
"use client";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@moe-ui/registry/components/ui/alert";
import { AlertCircle } from "lucide-react-native";
export const AlertPreview = () => {
return (
<Alert icon={AlertCircle}>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
);
};
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add alertUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Alert } from "@/components/ui/alert";Variants and composition
Each additional variant has its own live preview and testable section.
Destructive
"use client";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@moe-ui/registry/components/ui/alert";
import { AlertCircle } from "lucide-react-native";
export const AlertDestructiveVariantPreview = () => {
return (
<Alert icon={AlertCircle} variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>
);
};
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Status is not communicated by color alone. Add an accessible label or live-region behavior when the message changes dynamically.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports3 exports
AlertAlertDescriptionAlertTitle"use client";
import { Icon } from "./icon";
import { Text, TextClassContext } from "./text";
import { cn } from "../../lib/utils";
import type { LucideIcon } from "lucide-react-native";
import * as React from "react";
import { View, type ViewProps } from "react-native";
function Alert({
className,
variant,
children,
icon,
iconClassName,
...props
}: ViewProps &
React.RefAttributes<View> & {
icon: LucideIcon;
variant?: "default" | "destructive";
iconClassName?: string;
}) {
return (
<TextClassContext.Provider
value={cn(
"text-sm text-foreground",
variant === "destructive" && "text-destructive",
className,
)}
>
<View
role="alert"
className={cn(
"bg-card border-border relative w-full rounded-lg border px-4 pb-2 pt-3.5",
className,
)}
{...props}
>
<View className="absolute left-3.5 top-3">
<Icon
as={icon}
className={cn(
"size-4",
variant === "destructive" && "text-destructive",
iconClassName,
)}
/>
</View>
{children}
</View>
</TextClassContext.Provider>
);
}
function AlertTitle({
className,
...props
}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
return (
<Text
className={cn(
"mb-1 ml-0.5 min-h-4 pl-6 font-medium leading-none tracking-tight",
className,
)}
{...props}
/>
);
}
function AlertDescription({
className,
...props
}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
const textClass = React.useContext(TextClassContext);
return (
<Text
className={cn(
"text-muted-foreground ml-0.5 pb-1.5 pl-6 text-sm leading-relaxed",
textClass?.includes("text-destructive") && "text-destructive/90",
className,
)}
{...props}
/>
);
}
export { Alert, AlertDescription, AlertTitle };