Button

Primary

	32px xs	36px sm	40px md	44px lg	54px xl
Default
Hover
Pressed
Disabled

Sub

	32px xs	36px sm	40px md	44px lg	54px xl
Default
Hover
Pressed
Disabled

Grey

	32px xs	36px sm	40px md	44px lg	54px xl
Default
Hover
Pressed
Disabled

Usage (React)

@gbgr/react의 Button을 쓰는 경우:

import { Button } from "@gbgr/react";
import "@gbgr/react/styles.css";

export function Example() {
  return <Button tone="primary">Save</Button>;
}

Usage (UI)

앱에서 고수준 통합 패키지(@gbgr/ui)를 쓰는 경우:

import { Button } from "@gbgr/ui";
import "@gbgr/ui/styles.css";

export function Example() {
  return <Button tone="primary">Save</Button>;
}

@gbgr/react는 컴포넌트 레벨 제어가 필요한 저수준 선택지이고, @gbgr/ui는 토큰/스타일/컴포넌트를 함께 가져오는 고수준 선택지입니다.