Callout

import { Callout } from '@raystack/apsara';

<Callout>
  This is a basic callout message.
</Callout>

<Callout type="grey">
  Grey callout for general information.
</Callout>

<Callout type="success">
  Success callout for positive feedback.
</Callout>

<Callout type="alert">
  Alert callout for warnings or errors.
</Callout>

<Callout type="attention">
  Attention callout for important notices.
</Callout>

<Callout type="accent">
  Accent callout for highlighted information.
</Callout>

<Callout type="gradient">
  Gradient callout for special emphasis.
</Callout>

<Callout type="normal">
  Normal callout with minimal styling.
</Callout>

import { CheckCircledIcon } from '@radix-ui/react-icons';

<Callout icon={<CheckCircledIcon />} type="success">
  Task completed successfully!
</Callout>

<Callout icon={null}>
  Callout without an icon.
</Callout>

<Callout type="accent" outline>
  This callout has an outline style.
</Callout>

<Callout type="success" highContrast>
  High contrast callout for better visibility.
</Callout>

<Callout 
  type="alert"
  action={
    <button onClick={() => console.log('Action clicked')}>
      View Details
    </button>
  }
>
  Action required. Please review the details.
</Callout>

const [isVisible, setIsVisible] = useState(true);

if (!isVisible) return null;

return (
  <Callout
    dismissible
    onDismiss={() => setIsVisible(false)}
  >
    This callout can be dismissed.
  </Callout>
);

<Callout width={400}>
  Callout with fixed width of 400px.
</Callout>

<Callout width="50%">
  Callout with 50% width.
</Callout>

<Callout type="gradient">
  <div>
    <strong>New Feature Available</strong>
    <p>Check out our latest updates and improvements.</p>
  </div>
</Callout>