Alert

'use client';
import { useState } from 'react';
import { Button } from '@swiftuijs/ui';
import { Alert } from '@swiftuijs/ui';
function DefaultAlert() {
    const [isVisible, setIsVisible] = useState(false);
    return (<>
      <Button onClick={() => setIsVisible(true)}>Show Alert</Button>
      <Alert title="Alert" message="This is an alert message" isVisible={isVisible} onDismiss={() => setIsVisible(false)}/>
    </>);
}
export default function Example() {
    return (<DefaultAlert />);
}

Simple Alert

Alert without a message:

Usage and limitations

• Control visibility with isVisible and close from onDismiss.
• Buttons support default, cancel, and destructive styles. Use descriptive labels and mark dangerous actions as destructive.
• The shared modal traps focus, isolates the background and restores focus on closing. Check keyboard dismissal and labeling in your composition.
• The alert stays inside the available viewport and scrolls when text grows or the screen is short. Keep messages concise; use a Sheet for longer tasks.