- Getting Started
- Components

Alert

The Alert component is designed to notify users of important information, updates, or actions they need to take. It provides a clear and concise way to communicate messages such as success, warnings, errors, or general information.

This is an informational message providing helpful details about a feature or process. Please review this information carefully.

Usage as a Component

To simplify usage, you can create a reusable Alert component that accepts props for status, label, children, and icon. This allows you to display contextual alerts with customizable styles and icons based on the alert type (e.g., info, success, warning, danger). Below is an example implementation:

tsx

import React from "react";
import {
  InfoCircledIcon,
  CheckCircledIcon,
  ExclamationTriangleIcon,
  CrossCircledIcon,
  QuoteIcon,
} from "@radix-ui/react-icons";

type AlertProps = {
  status?: "info" | "success" | "warning" | "danger" | "other";
  label?: React.ReactNode;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  showIcon?: boolean;
};

const Alert = ({
  status = "other",
  label,
  children,
  icon,
  showIcon = true,
  ...props
}: AlertProps) => {
  const classNameConnect: string[] = [
    "flex items-center gap-1 p-1 rounded-1 border",
  ];

  const statusConfig = {
    info: {
      icon: InfoCircledIcon,
      bgColor: "bg-info",
      textColor: "text-info-contrast",
      borderColor: "border-info-contrast",
    },
    success: {
      icon: CheckCircledIcon,
      bgColor: "bg-success",
      textColor: "text-success-contrast",
      borderColor: "border-success-contrast",
    },
    warning: {
      icon: ExclamationTriangleIcon,
      bgColor: "bg-warning",
      textColor: "text-warning-contrast",
      borderColor: "border-warning-contrast",
    },
    danger: {
      icon: CrossCircledIcon,
      bgColor: "bg-danger",
      textColor: "text-danger-contrast",
      borderColor: "border-danger-contrast",
    },
    other: {
      icon: QuoteIcon,
      bgColor: "bg-black-1",
      textColor: "text-black-9",
      borderColor: "border-black-9",
    },
  };

  const config = status ? statusConfig[status] : statusConfig.other;
  const { icon: DefaultIcon, bgColor, textColor, borderColor } = config;

  classNameConnect.push(bgColor, textColor, borderColor);

  return (
    <div className={classNameConnect.join(" ")} {...props}>
      {showIcon && (icon ? icon : <DefaultIcon className="icon" />)}
      <div>
        {label && <div>{label}</div>}
        {children}
      </div>
    </div>
  );
};

export default Alert;

Usage Example

tsx

import Alert from "@/components/ui/Alert";

export default function Home() {
  return (
    <Alert
      status="info"
      label="This is an informational message providing helpful details about a feature or process. Please review this information carefully."
    />
  );
}

API Reference

Contains all the parts of an alert component.

Prop	Type	Default
status	enum	"info" \| "success" \| "warning" \| "danger" \| "other"
label	React.ReactNode
icon	React.ReactNode
showIcon	boolean	true