Icon Button

"use client";
import type { ComponentProps, ReactElement } from "react";
import { Button as Primitive } from "@base-ui/react/button";
import { withClassName } from "../../lib/cx";
import { Icon, type IconName } from "./icon";
import "./icon-button.css";
export type IconButtonProps = Omit<
  ComponentProps<typeof Primitive>,
  "children"
> & {
  /** 스크린 리더가 읽을 작업 이름입니다. */
  "aria-label": string;
  /** Roblox 아이콘 이름 또는 다른 아이콘팩의 SVG 요소입니다. */
  icon: IconName | ReactElement;
  /** 버튼 높이와 아이콘 크기입니다. @defaultValue "lg" */
  size?: "xs" | "sm" | "md" | "lg";
  /** 버튼의 색상과 강조 수준입니다. @defaultValue "emphasis" */
  variant?: "emphasis" | "standard" | "alert" | "utility" | "over-media";
  /** 원형으로 표시합니다. @defaultValue false */
  circular?: boolean;
  /** 선택한 상태의 스타일을 적용합니다. @defaultValue false */
  selected?: boolean;
};
/** 아이콘 전용 버튼은 텍스트 Button과 glyph 크기/utility 배경 규칙이 다릅니다. */
export function IconButton({
  icon,
  size = "lg",
  variant = "emphasis",
  circular = false,
  selected = false,
  className,
  ...props
}: IconButtonProps) {
  return (
    <Primitive
      {...props}
      data-size={size}
      data-variant={variant}
      data-circular={circular || undefined}
      data-selected={selected || undefined}
      className={withClassName("rbx-icon-button", className)}
    >
      {typeof icon === "string" ? (
        <Icon name={icon} size={{ xs: 16, sm: 20, md: 24, lg: 28 }[size]} />
      ) : (
        <Icon render={icon} size={{ xs: 16, sm: 20, md: 24, lg: 28 }[size]} />
      )}
    </Primitive>
  );
}

components/ui/icon-button.css

icon-button.css

.rbx-icon-button {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background-color: var(--rbx-color-action-emphasis-background);
  color: var(--rbx-color-action-emphasis-foreground);
}
.rbx-icon-button[data-size="md"] {
  width: 40px;
  height: 40px;
  min-height: 40px;
}
.rbx-icon-button[data-size="sm"] {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
.rbx-icon-button[data-size="xs"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 4px;
}
.rbx-icon-button[data-circular] {
  border-radius: 9999px;
}
.rbx-icon-button[data-variant="standard"] {
  background-color: var(--rbx-color-action-standard-background);
  color: var(--rbx-color-action-standard-foreground);
}
.rbx-icon-button[data-variant="alert"] {
  background-color: var(--rbx-color-action-alert-background);
  color: var(--rbx-color-action-alert-foreground);
}
.rbx-icon-button[data-variant="utility"] {
  background-color: var(--rbx-color-action-link-background);
  color: var(--rbx-color-content-emphasis);
}
.rbx-icon-button[data-variant="utility"][data-selected] {
  background-color: var(--rbx-color-shift-300);
}
.rbx-icon-button[data-variant="over-media"] {
  background-color: var(--rbx-color-over-media-0);
  color: var(--rbx-color-content-emphasis);
}
.rbx-icon-button:is(:disabled, [data-disabled]):is(
    [data-variant="emphasis"],
    [data-variant="alert"]
  ) {
  background-color: var(--rbx-color-action-standard-background);
  color: var(--rbx-color-action-standard-foreground);
}

목차