Alert

Inline status messages for info, success, warning, and error states.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Info

Your account has been updated successfully.

Success

Payment processed — transaction ID TXN-2934.

Warning

Your API key expires in 3 days. Rotate it now.

Error

Unable to connect to the payment gateway. Please retry.

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Alert, AlertTitle, AlertDescription } from "@payglocal_ui/flux-ui";

Example

<Alert variant="info">
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Your payout will be processed in 2 business days.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Payment failed. Please try again.</AlertDescription>
</Alert>