Alert

A component for displaying important messages, warnings, or feedback to users.

Usage

import { Alert } from "@rhinolabs/ui"

export default function AlertDemo() {
  return (
    <Alert>
      <Alert.Title>Heads up!</Alert.Title>
      <Alert.Description>
        You can add components to your app using the cli.
      </Alert.Description>
    </Alert>
  )
}

Examples

Variants

Alerts come in different variants to suit different contexts.

<div className="flex flex-col gap-4">
  <Alert>
    <Alert.Title>Default Alert</Alert.Title>
    <Alert.Description>
      This is a default alert - check it out!
    </Alert.Description>
  </Alert>

  <Alert variant="destructive">
    <Alert.Title>Error Alert</Alert.Title>
    <Alert.Description>
      Something went wrong! Please try again.
    </Alert.Description>
  </Alert>
</div>

With Icons

Alerts can include icons to enhance their visibility and meaning.

<Alert>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-4 w-4"
  >
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
    <line x1="12" y1="9" x2="12" y2="13" />
    <line x1="12" y1="17" x2="12.01" y2="17" />
  </svg>
  <Alert.Title>Warning</Alert.Title>
  <Alert.Description>
    Your session is about to expire. Please save your work.
  </Alert.Description>
</Alert>

Props

Alert Props

Prop	Type	Default	Description
variant	"default" | "destructive"	"default"	The visual style of the alert

The Alert component also accepts all standard HTML div attributes.

AlertTitle Props

The AlertTitle component accepts all standard HTML h5 attributes.

AlertDescription Props

The AlertDescription component accepts all standard HTML div attributes.

Design Considerations

• Use appropriate variants for message importance
• Keep messages clear and concise
• Include relevant icons when needed
• Use title for main message and description for details
• Maintain consistent spacing

Accessibility

• Uses semantic role="alert" attribute
• Maintains proper heading hierarchy
• Ensures readable content structure
• Provides clear visual distinction