Command Palette
Search for a command to run...
Alert
Displays contextual information with visual emphasis and semantic styling.About Alert
A static alert component for communicating important messages with different visual semantics. Supports multiple variants (default, destructive, info, success, warning) for different types of information.Installation
Import the Alert component from LSD:import { Alert } from '@nipsys/lsd'
export default function MyComponent() {
return <Alert />
}Variants
Component variants for different visual styles and use cases.Default
Destructive
Info
Success
Warning
Features
Additional features and capabilities of the component.Description Only
Composition
Alert
├── AlertTitle
└── AlertDescription
API Reference
Alert
variant
Visual style for the alert.
Type:
"default" | "destructive" | "info" | "success" | "warning"Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Not keyboard interactive (static content)
ARIA Attributes
Proper ARIA attributes for screen readers
• role="alert" identifies the alert to assistive technologies• Visual content should be textually described for screen readers
Focus States
Visible focus indicators for keyboard users
• Not focusable by design as it provides static information