Button

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

export default function DefaultButton() {
    return <Button>Button</Button>;
}

Property

Color

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

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

export default function ButtonColor() {
    return (
        <div className="flex flex-wrap gap-2">
            <Button color="primary">Primary</Button>
            <Button color="secondary">Secondary</Button>
            <Button color="success">Success</Button>
            <Button color="warning">Warning</Button>
            <Button color="danger">Danger</Button>
            <Button color="contrast">Contrast</Button>
        </div>
    );
}

Size

Button 사이즈는 sm, md, lg, xl 로 제공합니다.

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

export default function ButtonSize() {
    return (
        <div className="flex items-center gap-2">
            <Button size="sm">SM</Button>
            <Button size="md">MD</Button>
            <Button size="lg">LG</Button>
            <Button size="xl">XL</Button>
        </div>
    );
}

Variant

Button 스타일은 fill, outline, ghost 로 제공합니다.

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

export default function ButtonVariant() {
    return (
        <div className="flex items-center gap-2">
            <Button variant="fill">Fill</Button>
            <Button variant="outline">Outline</Button>
            <Button variant="ghost">Ghost</Button>
        </div>
    );
}

Stretch

stretch가 true일 경우 버튼이 컨테이너의 전체 너비를 차지합니다.

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

export default function ButtonStretch() {
    return (
        <div className="w-full space-y-2">
            <Button stretch>Stretch</Button>
            <Button>Normal</Button>
        </div>
    );
}

Disabled

disabled 속성을 사용하여 버튼을 비활성화할 수 있습니다.

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

export default function ButtonDisabled() {
    return (
        <div className="flex items-center gap-2">
            <Button disabled>Disabled</Button>
            <Button>Enabled</Button>
        </div>
    );
}

Examples

Button with Icon

아이콘과 함께 사용하는 버튼 예제입니다.

import { Button } from '@vapor-ui/core';
import { CheckCircleIcon, ChevronRightOutlineIcon } from '@vapor-ui/icons';

export default function ButtonWithIcon() {
    return (
        <div className="flex items-center gap-2">
            <Button>
                <CheckCircleIcon />
                Complete
            </Button>
            <Button variant="outline">
                Next
                <ChevronRightOutlineIcon />
            </Button>
        </div>
    );
}

Props Table

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

Prop	Default	Type
render?	button	ReactElementfunction
color?	primary	primarysecondarysuccesswarningdangercontrast
size?	md	smmdlgxl
variant?	fill	filloutlineghost
stretch?	false	boolean
disabled?	false	boolean
className?	undefined	string
children?	undefined	ReactNode
type?	button	buttonsubmitreset
onClick?	undefined	function

On this page