Alert

Alert message with multiple variants for different contexts.

Heads up!

You can add components to your app using the CLI.

import { Alert, AlertDescription } from "@/components/ui/alert";

export function MyScreen() {
  return (
    <Alert title="Heads up!">
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

Installation

npx @aniui/cli add alert

Usage

app/index.tsx

import { Alert, AlertDescription } from "@/components/ui/alert";

export function MyScreen() {
  return (
    <Alert title="Heads up!">
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  );
}

Variants

Default

This is a default alert.

Error

Something went wrong.

Success

Operation completed.

Warning

Please review before continuing.

<Alert variant="default" title="Default">
  <AlertDescription>This is a default alert.</AlertDescription>
</Alert>
<Alert variant="destructive" title="Error">
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>
<Alert variant="success" title="Success">
  <AlertDescription>Operation completed.</AlertDescription>
</Alert>
<Alert variant="warning" title="Warning">
  <AlertDescription>Please review before continuing.</AlertDescription>
</Alert>

Props

This component exports Alert and AlertDescription.

PropTypeDefault

variant

"default" | "destructive" | "success" | "warning"

"default"

title

string

—

titleClassName

string

—

className

string

—

children

React.ReactNode

—

Also accepts all View props from React Native.

Source

components/ui/alert.tsx

import React from "react";
import { View, Text } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const alertVariants = cva("rounded-lg border p-4", {
  variants: {
    variant: {
      default: "border-border bg-background",
      destructive: "border-destructive/50 bg-destructive/10",
      success: "border-green-500/50 bg-green-500/10",
      warning: "border-yellow-500/50 bg-yellow-500/10",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});
const alertTitleVariants = cva("text-base font-semibold mb-1", {
  variants: {
    variant: {
      default: "text-foreground",
      destructive: "text-destructive",
      success: "text-green-600",
      warning: "text-yellow-600",
    },
  },
  defaultVariants: { variant: "default" },
});
export interface AlertProps
  extends React.ComponentPropsWithoutRef<typeof View>,
    VariantProps<typeof alertVariants> {
  className?: string;
  title?: string;
  titleClassName?: string;
  children?: React.ReactNode;
}
export function Alert({ variant, className, title, titleClassName, children, ...props }: AlertProps) {
  return (
    <View className={cn(alertVariants({ variant }), className)} accessibilityRole="alert" {...props}>
      {title && <Text className={cn(alertTitleVariants({ variant }), titleClassName)}>{title}</Text>}
      {children}
    </View>
  );
}
export interface AlertDescriptionProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function AlertDescription({ className, ...props }: AlertDescriptionProps) {
  return <Text className={cn("text-sm text-muted-foreground", className)} {...props} />;
}