Netzo Logo

alert

Displays a call-out for user attention.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from 'netzo/components/alert.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "netzo/components/alert.tsx";

export default () => {
  return (
    <Alert>
      <i className="mdi-rocket-launch h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  );
};

Destructive

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "netzo/components/alert.tsx";

export default () => {
  return (
    <Alert variant="destructive">
      <i className="mdi-alert h-4 w-4" />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  );
};