IconButton

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

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

Property

Size

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

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

Color

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

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 color="primary" aria-label="기본 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton color="secondary" aria-label="보조 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton color="success" aria-label="성공 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton color="warning" aria-label="경고 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton color="danger" aria-label="위험 좋아요 버튼">
                <HeartIcon />
            </IconButton>
            <IconButton color="contrast" aria-label="대비 좋아요 버튼">
                <HeartIcon />
            </IconButton>
        </div>
    );
}

Variant

IconButton 스타일 변형은 fill, outline, ghost 로 제공합니다.

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

Shape

IconButton 모양은 square, circle 로 제공합니다.

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

Disabled

비활성화된 상태의 IconButton입니다. 사용자가 상호작용할 수 없습니다.

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

Props Table

IconButton은 아이콘만으로 작업을 수행하는 버튼 컴포넌트입니다. Button 컴포넌트를 확장하여 추가적인 shape 속성과 아이콘 전용 스타일링을 제공합니다. 접근성을 위해 적절한 aria-label을 반드시 제공해야 합니다. 이 컴포넌트는 button 요소를 기반으로 합니다.

Prop	Default	Type
render?	button	ReactElementfunction
color?	primary	primarysecondarysuccesswarningdangercontrast
size?	md	smmdlgxl
variant?	fill	filloutlineghost
shape?	square	squarecircle
disabled?	false	boolean
aria-label?	-	string
className?	undefined	string
children?	undefined	ReactNode