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="base">
      <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>