Alert

Example

A component that displays important messages and notifications to users.

import { Alert, AlertContent, AlertTitle, AlertDescription } from "@yummacss/ui";
import { InfoCircledIcon } from "@radix-ui/react-icons";

export default function Page() {
  return (
    <Alert variant="info">
      <AlertContent>
        <InfoCircledIcon />
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>A new version of Yumma UI is available.</AlertDescription>
      </AlertContent>
    </Alert>
  );
}

API reference

variant

Default value is base

(property) variant?: "base" | "error" | "info" | "success" | "warning" | null | undefined

Custom styling

Apply custom styles to the <Alert> component.

import { Alert } from "@yummacss/ui";

<Alert className="...">...</Alert>;

Extend properties

Extend the <Alert> component with the native <div> HTML attributes.

import { Alert } from "@yummacss/ui";

<Alert {...props}>...</Alert>;