Callout

Anyone can develop

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

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

Property

Color

Callout 색상은 primary, success, warning, danger, hint, contrast 로 제공합니다.

Anyone can develop

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 color="primary">Anyone can develop</Callout.Root>
            <Callout.Root color="success">Anyone can develop</Callout.Root>
            <Callout.Root color="warning">Anyone can develop</Callout.Root>
            <Callout.Root color="danger">Anyone can develop</Callout.Root>
            <Callout.Root color="hint">Anyone can develop</Callout.Root>
            <Callout.Root color="contrast">Anyone can develop</Callout.Root>
        </div>
    );
}

Examples

Callout with Icon

아이콘과 함께 사용하는 Callout 예제입니다. 아이콘은 Callout.Icon으로 감싸서 고정된 크기를 유지합니다.

Task completed successfully

Please review your settings

New notification available

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 color="success">
                <Callout.Icon>
                    <CheckCircleIcon />
                </Callout.Icon>
                Task completed successfully
            </Callout.Root>
            <Callout.Root color="warning">
                <Callout.Icon>
                    <InfoCircleOutlineIcon />
                </Callout.Icon>
                Please review your settings
            </Callout.Root>
            <Callout.Root color="primary">
                <Callout.Icon>
                    <HeartIcon />
                </Callout.Icon>
                New notification available
            </Callout.Root>
        </div>
    );
}

Props Table

Callout.Root

이 컴포넌트는 div 요소를 기반으로, 표준 HTML 속성(className, style 등)을 지원합니다.

Prop	Default	Type
render?	div	ReactElementfunction
color?	primary	primarysuccesswarningdangerhintcontrast
className?	undefined	string
children?	undefined	ReactNode

Callout.Icon

Callout 내에서 아이콘을 표시하는 데 사용되는 컴포넌트입니다. 아이콘의 크기와 위치를 적절히 조정하여 일관된 시각적 경험을 제공합니다. 이 컴포넌트는 div 요소를 기반으로, 표준 HTML 속성을 지원합니다.

Prop	Default	Type
render?	div	ReactElementfunction
className?	undefined	string
children?	undefined	ReactNode