Alert
A persistent, in-flow message about the current state
Update available
0.11.0 is ready. Installing restarts the app.
Theme saved
The workspace uses the new palette.
3 tokens are missing
The platform themes fall back to the default palette.
Upload failed
The connection closed before the file arrived.
3 tokens are missing
The platform themes fall back to the default palette.
Upload failed
Nothing left the machine.
Installation
npx shadcn@latest add @sudokw/components-alertimport { Alert } from "@gpuixui/components";Usage
import {
Alert,
AlertContent,
AlertDescription,
AlertTitle,
} from "@gpuixui/components/alert";
<Alert tone="warning">
<AlertContent>
<AlertTitle>3 tokens are missing</AlertTitle>
<AlertDescription>
The platform themes fall back to the default palette.
</AlertDescription>
</AlertContent>
</Alert>;Composition
Alert
├── AlertIcon
├── AlertContent
│ ├── AlertTitle
│ ├── AlertDescription
│ └── AlertLink
└── AlertDismissAPI reference
| Part | Prop | Type | Default | Consequence |
|---|---|---|---|---|
Alert | tone | "info" | "success" | "warning" | "danger" | "info" — a stored name the union does not carry | the surface, edge and readable colour every part inherits |
Alert | children | parts | — | the composition; a part outside the root throws |
| any part | className | string | — | joined after that part's recipe; style still merges last |
AlertLink | onSelect | () => void | — | the text action's handler, on click, Enter or Space |
AlertDismiss | onDismiss | () => void (required) | — | runs on click, Enter or Space; there is no optional dismiss |
AlertDismiss | label | string | "Dismiss" | the control's accessible name |
Keyboard
- EnterSpace
- runs the alert's action
read from alert.tsx
Edit this page on GitHubapps/docs/content/docs/components/alert.mdx