IconButton · Tinyrack Design System

핵심 속성

아이콘만 봐도 의미가 분명한 익숙한 동작에 IconButton을 쓰세요. 모든 인스턴스에는 접근 가능한 이름이 정확히 하나 필요해요. 이름을 직접 붙이려면 aria-label을, 다른 곳에 보이는 텍스트가 동작 이름 역할을 한다면 aria-labelledby를 쓰세요. 아이콘은 aria-hidden="true"로 장식용 처리해 이름과 겹치지 않게 하세요.

속성	값	기본값	용도
`variant`	`secondary`, `primary`, `danger`	`secondary`	동작의 의도를 전달해요.
`appearance`	`solid`, `outline`, `ghost`	`solid`	의도를 바꾸지 않고 강조 수준을 변경해요.
`uiSize`	`md`, `lg`	`md`	정사각형 동작 영역과 아이콘 크기를 설정해요.
상태	`disabled`, `loading`	상호작용 가능	네이티브 비활성 동작을 사용하며 `loading`은 `aria-busy`와 스피너를 추가해요.

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

@import '@tinyrack/ui/components/icon-button.css';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRIconButton } from '@tinyrack/ui/components/icon-button';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

사용법

설정 동작 고유 링크

아이콘이 아니라 동작에 이름을 지정하고 일반 이벤트 처리를 유지해요.

아직 실행한 동작이 없어요.

예시

동작 상태 고유 링크

`loading`은 아이콘을 장식용 스피너로 바꾸고 `loadingLabel`을 임시 접근 가능한 이름으로 사용해요. `disabled`는 네이티브 버튼 상태를 유지해요.

표현 방식 고유 링크

가장 강한 강조에는 `solid`, 경계가 필요한 동작에는 `outline`, 강조가 낮은 도구 모음 동작에는 `ghost`를 사용하세요.

동작 의도 고유 링크

주요 동작에는 primary를, 파괴적인 동작에만 danger를 사용하세요. secondary는 중립적인 기본값이에요.

크기 고유 링크

주변 컨트롤에 아이콘 버튼 크기를 맞추고 입력 방식에 충분한 동작 영역을 확보하세요.

API

TRIconButton은 aria-label 또는 aria-labelledby 중 하나를 요구하고, 하나의 아이콘을 children으로 받아요. Button prop, 네이티브 속성, 이벤트, className, style, React 19 ref, Base UI render 합성도 전달해요.
type의 기본값은 button이에요. 아이콘 동작이 폼을 제출할 때만 type="submit"을 명시하세요.
loading은 동작을 비활성화하고 aria-busy를 설정하며 원래 아이콘을 숨긴 뒤 장식용 스피너를 렌더링해요. loadingLabel은 일시적으로 aria-label을 대체하며, 대체 이름이 없으면 aria-labelledby 이름을 유지해요.
--tr-btn-height는 정사각형 동작 영역의 두 치수를 함께 조정해요. --tr-icon-button-icon-size는 직접 자식 SVG 아이콘 크기를 조정해요. 다른 Button 색상, 반경, 포커스, 모션, 비활성 토큰도 사용할 수 있어요.
IconButton CSS 서브패스에는 Button과 Spinner 의존 스타일이 포함돼요.