본문으로 건너뛰기
Amineslab UI

Component

IconButton

아이콘 하나로 표시하는 버튼입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px
Controls

loading을 켜면 로딩 문구에 적용됩니다.

접근 가능한 이름 (aria-label)

버튼의 표현 방식

inverse는 무채색 반전, brand는 브랜드, danger는 위험, info는 정보

variant가 secondary, outline, ghost일 때 배경에 적용됩니다.

양 끝을 둥글게 표시합니다

컨트롤 크기

비활성

진행 상태

Code
import { IconButton } from '@amineslab/ui'

import { Settings } from '@amineslab/ui/icons'

export default function ExamplePreview() {
  return ((<IconButton density={"touch"} loadingLabel={"설정 불러오는 중"} disabled={false} icon={Settings} label={"설정 열기"} loading={false} size={"md"} variant={"primary"} color={"inverse"} opaque={false} rounded={false}/>))
}

Props

@amineslab/ui에서 IconButton를 가져옵니다.

import { IconButton } from '@amineslab/ui'

IconButton

HTML <button> 요소의 표준 속성을 그대로 받습니다.

NameTypeDefaultDescription
icon*ButtonIcon-아이콘 컴포넌트 참조 또는 ReactNode. 크기별로 12/16/16/16/20px와 현재 버튼 색상이 적용됩니다.
label*string-버튼의 접근 가능한 이름입니다.
roundedbooleanfalse버튼 양 끝 또는 아이콘 버튼을 원형으로 표시합니다.
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'link''primary'버튼의 표현 방식을 정합니다. 위험 의미는 color="danger"로 지정합니다.
color'inverse' | 'brand' | 'danger' | 'info''inverse'inverse는 테마에 따라 반전되는 무채색, brand는 브랜드, danger는 위험, info는 정보 색상입니다.
opaquebooleanfalseoutline·secondary·ghost에 불투명 표면을 적용해 아래 섹션색의 영향을 없앱니다. primary·link에는 영향이 없습니다.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'PC 높이 24/28/32/40/48px, 모바일은 각각 +8px입니다. xs는 작은 글자, sm·md·lg는 같은 글자, xl은 큰 글자를 사용합니다.
density'touch' | 'compact''touch'터치 배치와 조밀한 배치의 버튼 높이를 전환합니다.
disabledbooleanfalse클릭과 키보드 실행, 폼 제출을 막습니다.
loadingbooleanfalse진행 상태를 표시하고 중복 실행을 막습니다. asChild와는 함께 쓸 수 없습니다.
loadingLabelstring-loading 상태를 보조 기술에 알릴 이름입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Variants

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { type ButtonVariant, IconButton } from '@amineslab/ui'

import { Plus } from '@amineslab/ui/icons'

const actionVariants = [
    'primary',
    'secondary',
    'outline',
    'ghost',
    'link',
] as const satisfies readonly ButtonVariant[];

const variants = actionVariants;

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          {variants.map((variant) => (<IconButton icon={<Plus aria-hidden="true" size={18}/>} key={variant} label={`추가 (${variant})`} variant={variant}/>))}
        </ExampleRow>))
}

Sizes

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { type ControlSize, IconButton } from '@amineslab/ui'

import { Settings } from '@amineslab/ui/icons'

const controlSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly ControlSize[];

const sizes = controlSizes;

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          {sizes.map((size) => (<IconButton icon={Settings} key={size} label={`설정 (${size})`} size={size} variant="outline"/>))}
        </ExampleRow>))
}

사용 기준

권장하는 사용
  • `aria-label`이나 화면에 보이는 레이블로 작업 이름을 제공합니다.
피해야 할 사용
  • 설명 없이 낯선 아이콘을 단독으로 사용하지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

  • 기본 button: Enter 또는 Space로 작업 실행