IconButton

아이콘 1개 affordance — variant 5종(normal/subtle/background/outlined/solid) × size 4종

사용

import { IconButton } from "@fluxloop-ai/pds-ui/components/icon-button";
import { Icon } from "@fluxloop-ai/pds-ui/components/icon";
import { MagnifyingGlass } from "@fluxloop-ai/pds-icons/icons";

<IconButton aria-label="검색">
  <Icon icon={MagnifyingGlass} />
</IconButton>

Button 과의 차이는 컨테이너의 강도다. IconButton 은 텍스트가 들어가지 않는, 액션 영역 바깥(툴바·입력 인접·리스트 행)에 놓이는 아이콘 어포던스를 다룬다. aria-label 은 필수.

Variant

5 종 — normal / subtle / background / outlined / solid.

normal — idle 시 배경 없음. hover 시에만 fill. 가장 약한 강조 (default).
subtle — label-alternative(흐림)로 시작 → hover 시 label-normal(또렷) + fill. 본 콘텐츠 옆 보조 액션(헤더·툴바·sidebar 액션)에 적합. idle 가시성을 한 단계 낮춰 시선을 안 뺏는다.
background — fill-normal 배경. 콘텐츠 안에서 자연스럽게 배경을 가짐.
outlined — 1px 테두리. 액션을 명시적으로 구획.
solid — primary fill. 페이지/패널의 main 아이콘 액션 (예: 채팅 send).

Size

xs(18/r4/icon14) · sm(24/r6/icon14) · md(32/r8/icon16) · lg(40/r10/icon20).

인라인 사용

토스트·태그·메시지 옆처럼 좁은 자리에서는 sm 으로.

알림이 도착했어요

Props

Prop	타입	기본	설명
`variant`	`normal \| subtle \| background \| outlined \| solid`	`normal`	컨테이너 톤
`size`	`xs \| sm \| md \| lg`	`md`	정사각형 크기
`aria-label`	`string`	—	접근성 라벨 (필수)
`asChild`	`boolean`	`false`	Radix Slot 위임

Button 과의 분리 원칙

텍스트가 같이 있어야 한다면 → Button(+ leadingContent/trailingContent)
아이콘만, 액션 영역 바깥 → IconButton
배경 없이 글자만 → TextButton

Registry 설치

npx shadcn add https://pds.pluto.com/r/icon-button