Alert.

Something worth your attention.

In practice

Uses role=status for polite announcements. Use role=alert only for urgent errors.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Check } from "lucide-react";
import { Alert } from "@chlohal/coal-ui";
export default function Example() {
    return (<Alert>
          <div>
            <Check size={16}/>
            <div>
              <p>You&apos;re all set.</p>
              <p>
                Your changes have found their place.
              </p>
            </div>
          </div>
        </Alert>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
import { type Intent, intentSymbols } from "./intent.js";
export type AlertProps = React.ComponentPropsWithRef<"div"> & {
  intent?: Intent;
};
export function Alert({
  className,
  intent = "info",
  children,
  ...props
}: AlertProps) {
  return (
    <div
      role={intent === "danger" ? "alert" : "status"}
      className={cn("coal-alert", `coal-intent-${intent}`, className)}
      {...props}
    >
      <span className="coal-intent-symbol" aria-hidden="true">
        {intentSymbols[intent]}
      </span>
      <div>{children}</div>
    </div>
  );
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.