Alert

import { Alert } from "@raydenui/ui";

<Alert state="information">This is an informational message</Alert>

<Alert state="information">Information alert</Alert>
<Alert state="success">Success! Operation completed.</Alert>
<Alert state="warning">Warning: Please review before proceeding.</Alert>
<Alert state="error">Error: Something went wrong.</Alert>

// Toast variant (default)
<Alert variant="toast" state="success">
  Changes saved successfully
</Alert>
 
// Banner variant
<Alert variant="banner" state="warning">
  Your trial expires in 3 days
</Alert>

<Alert state="success" title="Payment Successful">
  Your payment of $99.00 has been processed.
</Alert>

<Alert
  state="error"
  title="Connection Lost"
  actions={
    <Button size="sm" variant="destructive" appearance="outlined">
      Retry
    </Button>
  }
>
  Unable to connect to the server. Please try again.
</Alert>

const [show, setShow] = useState(true);
 
{show && (
  <Alert
    state="information"
    onDismiss={() => setShow(false)}
  >
    New features are available!
  </Alert>
)}