Alert

import { Alert, AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives";

import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives";
import {
  Terminal } from "@tilt-legal/cubitt-icons/ui/outline";

<Alert>
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>;

import { Alert } from "@tilt-legal/cubitt-components/primitives";

import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives";
import {
  CircleInfo } from "@tilt-legal/cubitt-icons/ui/outline";

<Alert variant="info">
  <CircleInfo />
  <AlertTitle>New features available</AlertTitle>
  <AlertDescription>
    We've added new components to the library. Check out the latest
    documentation for details.
  </AlertDescription>
</Alert>;

import { Alert } from "@tilt-legal/cubitt-components/primitives";

import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives";
import {
  CircleXmark } from "@tilt-legal/cubitt-icons/ui/outline";

<Alert variant="destructive">
  <CircleXmark colorSecondary="currentColor" />
  <AlertTitle>Unable to process your payment</AlertTitle>
  <AlertDescription>
    Please verify your billing information and try again.
  </AlertDescription>
</Alert>;

import { Alert } from "@tilt-legal/cubitt-components/primitives";

import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives";
import {
  TriangleWarning } from "@tilt-legal/cubitt-icons/ui/outline";

<Alert variant="warning">
  <TriangleWarning colorSecondary="currentColor" />
  <AlertTitle>Storage space running low</AlertTitle>
  <AlertDescription>
    You're using 85% of your available storage. Consider upgrading your plan or
    deleting unused files.
  </AlertDescription>
</Alert>;

import { Alert } from "@tilt-legal/cubitt-components/primitives";

import { CircleCheck } from "@tilt-legal/cubitt-icons/ui/outline";

<Alert variant="success">
  <CircleCheck colorSecondary="currentColor" />
  <AlertTitle>Successfully deployed</AlertTitle>
  <AlertDescription>
    Your application has been deployed to production. All systems are running
    normally.
  </AlertDescription>
</Alert>;