VuiAdmin

Alert

Alert is a callout that highlights an important message to the user.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/alert.tsx
Import from@viliha/vui-react/alert

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Include an icon as the first child to get the two-column layout; use variant="destructive" for errors.

alert-demo.tsx
import { Alert, AlertTitle, AlertDescription } from "@viliha/vui-react/alert";
import { InfoCircledIcon } from "@radix-ui/react-icons";

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

Alert props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDescription props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertTitle props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.