@olundot/ui · Actions

IconButton

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

크기 기준
sm 28 · md 32 · lg 40
배지 색상
정보 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 / pressed / danger
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
disabled
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={
          <svg aria-hidden="true" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M6 2v8M2 6h8" />
          </svg>
        }
      />
      <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>
  );
}