Alert

import { Alert } from '@kivora/react';

<Alert variant="success" title="Saved!">
  Your changes have been saved.
</Alert>

<Alert variant="default" title="Note">
  This is a default alert message.
</Alert>

<Alert variant="success" title="Success">
  Operation completed successfully.
</Alert>

<Alert variant="warning" title="Warning">
  Please review this important information.
</Alert>

<Alert variant="error" title="Error">
  An error occurred while processing your request.
</Alert>

<Alert variant="info" title="Information">
  Here's some helpful information for you.
</Alert>

import { useState } from 'react';

function Example() {
  const [visible, setVisible] = useState(true);
  
  if (!visible) return null;
  
  return (
    <Alert 
      variant="error" 
      title="Error"
      onClose={() => setVisible(false)}
    >
      Something went wrong.
    </Alert>
  );
}

<Alert 
  variant="info"
  title="Custom Icon"
  icon={
    <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" />
    </svg>
  }
>
  This alert uses a custom icon.
</Alert>

<Alert variant="warning">
  This is a simple warning message without a title.
</Alert>