Uiplex

Alert

Alert component for displaying important messages with variants and optional close button.

Variants

import { Alert } from 'uiplex';

<Alert variant="info" title="Info">Your session will expire soon.</Alert>
<Alert variant="success">Changes saved successfully.</Alert>
<Alert variant="warning" title="Warning">Please review before submitting.</Alert>
<Alert variant="error" title="Error">Something went wrong.</Alert>

With Close Button

const [visible, setVisible] = useState(true);

<Alert variant="info" onClose={() => setVisible(false)}>
  Dismissible alert. Click × to close.
</Alert>

With Title

<Alert variant="success" title="Success">
  Your profile has been updated.
</Alert>

API Reference

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "error""info"Alert style variant
titlestring-Optional title above the message
onClose() => void-Called when close button is clicked; shows close button when provided
childrenReact.ReactNode-Alert message content
classNamestring""Additional CSS classes
styleReact.CSSProperties-Inline styles