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