IconButton

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function DefaultIconButton() {
    return (
        <IconButton aria-label="Like">
            <HeartIcon />
        </IconButton>
    );
}

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function IconButtonSize() {
    return (
        <div className="flex items-center gap-4">
            <IconButton size="sm" aria-label="작은 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton size="md" aria-label="보통 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton size="lg" aria-label="큰 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton size="xl" aria-label="매우 큰 좋아요 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function IconButtonColor() {
    return (
        <div className="flex flex-wrap gap-2">
            <IconButton colorPalette="primary" aria-label="기본 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton colorPalette="secondary" aria-label="보조 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton colorPalette="success" aria-label="성공 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton colorPalette="warning" aria-label="경고 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton colorPalette="danger" aria-label="위험 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton colorPalette="contrast" aria-label="대비 좋아요 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function IconButtonVariant() {
    return (
        <div className="flex items-center gap-4">
            <IconButton variant="fill" aria-label="채움 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton variant="outline" aria-label="테두리 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton variant="ghost" aria-label="투명 좋아요 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function IconButtonShape() {
    return (
        <div className="flex items-center gap-4">
            <IconButton shape="square" aria-label="사각형 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton shape="circle" aria-label="원형 좋아요 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}

import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';

export default function IconButtonDisabled() {
    return (
        <div className="flex items-center gap-4">
            <IconButton disabled aria-label="비활성화된 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton disabled variant="outline" aria-label="비활성화된 테두리 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton disabled variant="ghost" aria-label="비활성화된 투명 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}