Alerts
Alerts provide contextual feedback messages for typical user actions.
<Alert state="success" type="standard" title="Changes saved successfully" description="Your profile has been updated and is now live across all SDAIA services."Installation
npx sdaia-ui@latest add alerts
Usage
import { Alert } from "@/components/ui/alert"1<Alert>2<AlertTitle>Title</AlertTitle>3<AlertDescription>Description</AlertDescription>4</Alert>
Examples
Default
A basic alert with a title and description.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertStandard() {Outline
Use `type="Outline"` for a bordered alert with no background fill.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertOutline() {Solid
Use `type="Solid"` for a high-contrast background. Use sparingly.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertSolid() {Alert
Use `state="Neutral"` for a general-purpose message with no semantic colour.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertNeutral() {Info
Use `state="Info"` for hints, tips, or supplementary information.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertInfo() {Success
Use `state="Success"` to confirm a completed action or process.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertSuccess() {Warning
Use `state="Warning"` for conditions that may need the user's attention.
'use client'; import { Alert, Button } from 'sdaia-ui'; export default function AlertWarning() {Destructive
Use `state="Error"` for critical problems that must be resolved.
'use client'; import { Alert, Button } from 'sdaia-ui';import { usePreviewDir } from '@/context/PreviewDirContext'; API Reference
AlertProps
Props for the Alert component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'standard' | 'outline' | 'solid' | 'standard' | optional |
state | 'neutral' | 'info' | 'error' | 'warning' | 'success' | - | optional |
variant | 'neutral' | 'info' | 'error' | 'warning' | 'success' | deprecated | optional |
title | string | - | optional |
description | string | - | optional |
closable | boolean | false | optional |
onClose | () => void | - | optional |
leadingIcon | ReactNode | boolean | - | optional |
icon | ReactNode | deprecated | optional |
actions | ReactNode | - | optional |
iconTop | boolean | false | optional |
children | ReactNode | - | optional |