Button

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

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

Property

ColorPalette

Button의 역할에 따른 색상을 설정합니다.

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

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

Size

Button의 크기를 설정합니다.

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의 시각적 다양성을 설정합니다.

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>
    );
}

Disabled

Button의 비활성화 상태를 설정합니다.

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

Button의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다.

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

Loading component documentation...

On this page