Alert

Callout for statuses and important messages.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Alert, AlertTitle, AlertDescription } from "@aspyn-io/kit";

Default

Scheduled maintenance

The API will be read-only on Sunday from 02:00–04:00 UTC.

<Alert>
  <AlertTitle>Scheduled maintenance</AlertTitle>
  <AlertDescription>
    The API will be read-only on Sunday from 02:00–04:00 UTC.
  </AlertDescription>
</Alert>

Feedback variants

destructive, success, warning, and info map to the feedback tokens.

Payment failed

Your card was declined.

Deployed

Your changes are live.

Approaching quota

You have used 90% of included API calls.

New in v0.2

Component pages now include full examples.

<Alert variant="destructive">
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>Your card was declined.</AlertDescription>
</Alert>
<Alert variant="success">
  <AlertTitle>Deployed</AlertTitle>
  <AlertDescription>Your changes are live.</AlertDescription>
</Alert>

Notes

Alert renders role="alert" so screen readers announce it immediately — reserve it for genuinely important messages.