Ritro UI logo

Alert

Displays a callout for user attention with different severity levels.

Installation

npm install @ritro-ui/react@1.2.0

Import

import { Alert, AlertTitle, AlertDescription } from "@ritro-ui/react"

Usage

Heads up!

You can add components and dependencies to your app using the cli.

<Alert>
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Props

Component
Prop
Type
Description
Alert
variant
string
Alert variant (default, info, warning, error, success)
Alert
className
string
Additional CSS classes

Examples

Alert Variants

Information

This is an informational alert for your attention.

Warning

This action might have unexpected consequences.

Error

There was a problem with your request.

Success

Your changes have been saved successfully.

<Alert variant="info">
  <Info className="h-5 w-5" />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This is an informational alert for your attention.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertCircle className="h-5 w-5" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>This action might have unexpected consequences.</AlertDescription>
</Alert>

<Alert variant="error">
  <AlertCircle className="h-5 w-5" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>There was a problem with your request.</AlertDescription>
</Alert>

<Alert variant="success">
  <CheckCircle className="h-5 w-5" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>