Alert

import { Alert } from '@arcana-ui/core'

<Alert variant="info">Your account is pending verification.</Alert>
<Alert variant="success">Payment processed successfully.</Alert>
<Alert variant="warning">Storage is 90% full.</Alert>
<Alert variant="error">Failed to save changes. Please try again.</Alert>
 
{/* With title */}
<Alert variant="warning" title="Storage limit approaching">
  You've used 90% of your 10GB storage quota. Upgrade to continue uploading files.
</Alert>
 
{/* Dismissible */}
<Alert variant="info" dismissible onDismiss={() => setVisible(false)}>
  A new version is available. Refresh to update.
</Alert>

const [visible, setVisible] = useState(true)
 
{visible && (
  <Alert
    variant="info"
    dismissible
    onDismiss={() => setVisible(false)}
  >
    Feature announcement
  </Alert>
)}

<Alert variant="warning" title="Unsaved changes">
  You have unsaved changes. Save or discard before leaving.
  <div style={{ marginTop: '0.75rem', display: 'flex', gap: '0.5rem' }}>
    <Button size="sm">Save</Button>
    <Button size="sm" variant="ghost">Discard</Button>
  </div>
</Alert>