Alert

This section provides an overview of the Alert component and usage guidelines.

The Alert component is used to display important messages to the user. It comes in various variants to indicate different types of messages, such as success, error, and warning.

Default Alert

This is a default alert message.

Destructive Alert

This is a destructive alert message.

Success Alert

This is a success alert message.

Warning Alert

This is a warning alert message.

Variants

The Alert component supports several variants to indicate the type of message:

default: Used for general information.
destructive: Used for error or destructive actions.
success: Used for success messages.
warning: Used for warning messages.

Usage

Here's an example of how to use the Alert component with the destructive variant:

import { Alert, AlertTitle, AlertDescription, AlertFooter, Button } from '@xata.io/components';
import { CircleAlert } from 'lucide-react';
import { cn } from '../../lib/utils';

<Alert variant="destructive" className={cn('mt-8', className)} icon={<CircleAlert />}>
  <AlertTitle>Delete Branch</AlertTitle>
  <AlertDescription>
    You will not be able to undo this action. All migrations within this branch will also be deleted.
  </AlertDescription>
  <AlertFooter>
    <Button variant="destructive" size="sm" onClick={() => setShowDeleteModal(true)}>
      Permanently Delete Branch
    </Button>
  </AlertFooter>
</Alert>;

Props

The Alert component accepts the following props:

variant: The variant of the alert. Can be default, destructive, success, or warning.
className: Additional classes to apply to the alert.

Example

Here's a complete example of using the Alert component with different variants:

import { Alert, AlertTitle, AlertDescription, AlertFooter, Button } from '@xata.io/components';
import { CircleAlert, CheckCircle, Info, AlertTriangle } from 'lucide-react';
import { cn } from '../../lib/utils';

function AlertExamples() {
  return (
    <div className="space-y-4">
      <Alert variant="default" className={cn('mt-8', className)} icon={<Info />}>
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>This is a default alert message.</AlertDescription>
      </Alert>

      <Alert variant="destructive" className={cn('mt-8', className)} icon={<CircleAlert />}>
        <AlertTitle>Delete Branch</AlertTitle>
        <AlertDescription>
          You will not be able to undo this action. All migrations within this branch will also be deleted.
        </AlertDescription>
        <AlertFooter>
          <Button variant="destructive" size="sm" onClick={() => setShowDeleteModal(true)}>
            Permanently Delete Branch
          </Button>
        </AlertFooter>
      </Alert>

      <Alert variant="success" className={cn('mt-8', className)} icon={<CheckCircle />}>
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>This is a success alert message.</AlertDescription>
      </Alert>

      <Alert variant="warning" className={cn('mt-8', className)}>
        <AlertTriangle />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>This is a warning alert message.</AlertDescription>
      </Alert>
    </div>
  );
}

Illustration Style

The Alert component can be styled using custom classes. Here's an example of how to style the Alert component:

<Alert variant="destructive" className={cn('mt-8', className)} icon={<CircleAlert />}>
  <AlertTitle>Delete Branch</AlertTitle>
  <AlertDescription>
    You will not be able to undo this action. All migrations within this branch will also be deleted.
  </AlertDescription>
  <AlertFooter>
    <Button variant="destructive" size="sm" onClick={() => setShowDeleteModal(true)}>
      Permanently Delete Branch
    </Button>
  </AlertFooter>
</Alert>

Conclusion

The Alert component is a versatile component that can be used to display various types of messages to the user. By using different variants and custom styles, you can create alerts that fit your application's design and requirements.

Illustrations

Code