@olundot/ui · Actions

IconButton

좁은 툴바에서 닫기, 새로고침, 알림, 더보기처럼 텍스트 없이 쓰는 정사각형 아이콘 액션입니다.

크기 기준
sm 32 · md 44 · lg 48
배지 색상
정보 accent-solid / accent-on-solid · 오류 error / error-contrast
접근성 기준
aria-label 또는 aria-labelledby 필수

기본

단일 액션
코드 보기tsx
import { MoreHorizontal } from "lucide-react";
import { IconButton } from "@olundot/ui";

export function BasicIconButton() {
  return <IconButton aria-label="더보기" icon={MoreHorizontal} />;
}

종류

기본 / 선택됨
ghost
outline
subtle
danger
코드 보기tsx
import { Bookmark, MoreHorizontal, RefreshCw, Trash2 } from "lucide-react";
import { IconButton } from "@olundot/ui";

export function IconButtonVariants() {
  return (
    <>
      <IconButton aria-label="더보기" icon={MoreHorizontal} variant="ghost" />
      <IconButton aria-label="새로고침" icon={RefreshCw} variant="outline" />
      <IconButton aria-label="저장됨" icon={Bookmark} variant="subtle" pressed />
      <IconButton aria-label="삭제" icon={Trash2} variant="danger" />
    </>
  );
}

크기

sm ~ lg
sm 32
md 44
lg 48
코드 보기tsx
import { Settings } from "lucide-react";
import { IconButton } from "@olundot/ui";

export function IconButtonSizes() {
  return (
    <>
      <IconButton aria-label="작은 설정" icon={Settings} size="sm" variant="outline" />
      <IconButton aria-label="기본 설정" icon={Settings} size="md" variant="outline" />
      <IconButton aria-label="큰 설정" icon={Settings} size="lg" variant="outline" />
    </>
  );
}

배지

숫자 / 아이콘 / 오류
숫자
아이콘
오류
코드 보기tsx
import { Bell } from "lucide-react";
import { IconButton } from "@olundot/ui";

export function IconButtonBadges() {
  return (
    <>
      <IconButton aria-label="알림 3개" icon={Bell} variant="outline" badge={3} />
      <IconButton aria-label="확인 필요" icon={Bell} variant="outline" badge="!" badgeTone="error" />
    </>
  );
}

툴바

작은 툴바
코드 보기tsx
import { Bell, Bookmark, RefreshCw, X } from "lucide-react";
import { IconButton } from "@olundot/ui";

export function ToolbarActions() {
  return (
    <div role="toolbar" aria-label="패널 액션">
      <IconButton aria-label="새로고침" icon={RefreshCw} size="sm" />
      <IconButton aria-label="저장" icon={Bookmark} size="sm" pressed />
      <IconButton aria-label="알림" icon={Bell} size="sm" variant="outline" badge={2} />
      <IconButton aria-label="닫기" icon={X} size="sm" />
    </div>
  );
}