Alert

A callout that conveys important information to the user, such as system messages, warnings, or errors.

Heads up!

You can add components to your app using the CLI.

import { Alert, AlertTitle, AlertDescription } from "~/components/alert";

export default function AlertBasicDemo() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
  );
}

Installation

CLI

Run the following command to add the component to your project:

npx @ark-preset/cli@latest add alert

Manual

Create the recipe file at src/components/recipes/alert.ts:

import { tv, type VariantProps } from "tailwind-variants";

export const alertVariants = tv({
  slots: {
    root: "relative w-full rounded-lg border border-border p-2.5 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-2.5 [&>svg]:top-2.5 [&>svg]:text-foreground [&>svg~*]:pl-7",
    title: "mb-1 font-medium leading-none tracking-tight",
    description: "text-sm text-muted-foreground [&_p]:leading-relaxed",
    action: "",
  },
  variants: {
    variant: {
      default: {
        root: "bg-background text-foreground",
      },
      destructive: {
        root: "border-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export type AlertVariants = VariantProps<typeof alertVariants>;

Create the component file at src/components/alert/index.tsx:

import { splitProps, type Component } from "solid-js";
import { alertVariants, type AlertVariants } from "../recipes/alert";
import { ark, type HTMLArkProps } from "@ark-ui/solid/factory";

const styles = alertVariants();

type AlertProps = HTMLArkProps<"div"> & AlertVariants;

const Alert: Component<AlertProps> = (props) => {
  const [local, others] = splitProps(props, ["class", "variant"]);
  return (
    <ark.div
      role="alert"
      class={styles.root({ variant: local.variant, class: local.class })}
      {...others}
    />
  );
};

type AlertTitleProps = HTMLArkProps<"h5">;

const AlertTitle: Component<AlertTitleProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.h5 class={styles.title({ class: local.class })} {...others} />;
};

type AlertDescriptionProps = HTMLArkProps<"div">;

const AlertDescription: Component<AlertDescriptionProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.div class={styles.description({ class: local.class })} {...others} />;
};

type AlertActionProps = HTMLArkProps<"div">;

const AlertAction: Component<AlertActionProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.div class={styles.action({ class: local.class })} {...others} />;
};

export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants };

Note: Make sure your project has the Tailwind CSS theme variables set up (--background, --foreground, --ring, --border, etc.) or override the utility classes to match your design system.

Usage

Basic Usage

Heads up!

You can add components to your app using the CLI.

import { Alert, AlertTitle, AlertDescription } from "~/components/alert";

export default function AlertBasicDemo() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
  );
}

Destructive

Use the destructive variant for error or destructive alerts.

Error

An error occurred while processing your request.

import { Alert, AlertTitle, AlertDescription } from "~/components/alert";

export default function AlertDestructiveDemo() {
  return (
    <Alert variant="destructive">
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>An error occurred while processing your request.</AlertDescription>
    </Alert>
  );
}

With Icon

Display an icon alongside the alert content.

Heads up!

You can add components to your app using the CLI.

import { Alert, AlertTitle, AlertDescription } from "~/components/alert";

export default function AlertIconDemo() {
  return (
    <Alert>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-4"
      >
        <circle cx="12" cy="12" r="10" />
        <line x1="12" x2="12" y1="8" y2="12" />
        <line x1="12" x2="12.01" y1="16" y2="16" />
      </svg>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
  );
}

Variants

Use the variant prop to change the visual style.

Default Alert

This is the default alert style.

Destructive Alert

This is the destructive alert style.

import { Alert, AlertTitle, AlertDescription } from "~/components/alert";

export default function AlertVariantsDemo() {
  return (
    <div class="space-y-4">
      <Alert>
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>This is the default alert style.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>This is the destructive alert style.</AlertDescription>
      </Alert>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
variant	`"default" \| "destructive"`	`"default"`	The visual style variant
class	`string`	—	Additional CSS classes

Anatomy

Part	Element	Description
`Alert`	`div`	The root container with `role="alert"`.
`AlertTitle`	`h5`	The title text.
`AlertDescription`	`div`	The description text.
`AlertAction`	`div`	Action element, positioned within the alert.