labsUI

Alert

Server-safe inline banner: tinted surface, colored icon, title, description and an optional action. Info, success, warning and destructive tones follow the accent and status tokens.

npx @kznlabs/labsui add alert

New version available

labsUI 0.2 adds Context menu, Alert, Progress and Empty.

Bot connected

Slash commands are live in 3 servers.

Token expires in 2 days

Renew it to keep the dashboard in sync.

Payment failed

Your card was declined. Update it in Billing.
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";import { Button } from "@/components/ui/button";export function TokenWarning() {  return (    <Alert      variant="warning"      action={        <Button size="sm" variant="outline">          Renew        </Button>      }    >      <AlertTitle>Token expires in 2 days</AlertTitle>      <AlertDescription>        Renew it to keep the dashboard in sync.      </AlertDescription>    </Alert>  );}

<Alert>

Inline banner: tinted surface, colored icon, title and description. No live-region role by default (a static banner should not be announced on load); add role="alert" when it appears in response to something the user did.

  • action
    ReactNode

    Right-aligned slot, e.g. a small Button.

  • icon
    ReactNode

    Replaces the variant's icon; pass null for none.

  • variantdefault "default"
    "default" | "info" | "success" | "warning" | "destructive"

    Tone: sets the tint and the default icon.

PropTypeDefault
action

Right-aligned slot, e.g. a small Button.

ReactNode—
icon

Replaces the variant's icon; pass null for none.

ReactNode—
variant

Tone: sets the tint and the default icon.

"default" | "info" | "success" | "warning" | "destructive""default"

Also accepts every <div> prop.

<AlertTitle>

Also accepts every <p> prop (none of its own).

<AlertDescription>

Also accepts every <div> prop (none of its own).

* required. Every component also takes className.