Alert

Contextual feedback banner for success, warning, danger, or info.

Installation

npx @obi/ui add alert

Preview

Heads up

This is a default alert.

Success

Your changes were saved.

Warning

Review before continuing.

Error

Something went wrong.

Usage

import { Alert } from '@/src/components/Alert/Alert';

<Alert title="Heads up">This is a default alert.</Alert>
<Alert variant="success" title="Success">Your changes were saved.</Alert>
<Alert variant="warning" title="Warning">Review before continuing.</Alert>
<Alert variant="danger" title="Error">Something went wrong.</Alert>

Props

Name	Type	Default	Description
variant	'default' \| 'success' \| 'warning' \| 'danger'	'default'	Alert color and icon.
title	string	undefined	Bold heading text.
children	ReactNode	undefined	Body content.
className	string	''	Additional CSS classes.