Callout

import { Callout } from '@vapor-ui/core';

export default function DefaultCallout() {
    return <Callout.Root colorPalette="primary">Anyone can develop</Callout.Root>;
}

import { Callout } from '@vapor-ui/core';

export default function CalloutColor() {
    return (
        <div className="flex w-full max-w-xl flex-col gap-2">
            <Callout.Root colorPalette="primary">Anyone can develop</Callout.Root>
            <Callout.Root colorPalette="success">Anyone can develop</Callout.Root>
            <Callout.Root colorPalette="warning">Anyone can develop</Callout.Root>
            <Callout.Root colorPalette="danger">Anyone can develop</Callout.Root>
            <Callout.Root colorPalette="hint">Anyone can develop</Callout.Root>
            <Callout.Root colorPalette="contrast">Anyone can develop</Callout.Root>
        </div>
    );
}

import { Callout } from '@vapor-ui/core';
import { CheckCircleIcon, HeartIcon, InfoCircleOutlineIcon } from '@vapor-ui/icons';

export default function CalloutWithIcon() {
    return (
        <div className="flex w-full max-w-xl flex-col gap-2">
            <Callout.Root colorPalette="success">
                <Callout.Icon>
                    <CheckCircleIcon />
                </Callout.Icon>
                Task completed successfully
            </Callout.Root>
            <Callout.Root colorPalette="warning">
                <Callout.Icon>
                    <InfoCircleOutlineIcon />
                </Callout.Icon>
                Please review your settings
            </Callout.Root>
            <Callout.Root colorPalette="primary">
                <Callout.Icon>
                    <HeartIcon />
                </Callout.Icon>
                New notification available
            </Callout.Root>
        </div>
    );
}