feat(button): Redesign Button component based on 5th generation design system by osohyun0224 · Pull Request #263 · sipe-team/side

osohyun0224 · 2026-04-28T09:27:42Z

Changes

피그마 파일 바로 가기 5세대 디자인 시스템에 맞춰 Button 컴포넌트를 전면 개편했습니다.

타입 시스템 변경

Size: 기존 sm | lg → sm | md | lg | xl (4단계로 확장)
Variant: 기존 filled | outline | ghost → fill | outline | ghost (filled → fill 네이밍 변경)
Icon: leftIcon, rightIcon props 추가 (ReactNode 타입, 상위 컴포넌트에서 아이콘 전달)

사이즈별 스펙

Size	Height	Padding	Border Radius	Font Size
`sm`	32px	0 8px	4px	12px
`md`	40px	0 12px	6px	14px
`lg`	48px	0 16px	6px	16px
`xl`	64px	0 24px	8px	24px

Variant 스타일

Variant	배경	텍스트	테두리
`fill`	`#FF7C27` (5th orange)	`#000`	없음
`outline`	transparent	`#FF7C27`	1px solid `#FF7C27`
`ghost`	transparent	`#FF7C27`	없음

Interaction 상태 (fill 기준)

상태	배경색
Default	`#FF7C27`
Hover	`linear-gradient(225deg, #FF4500 0%, #FFB24D 100%)`
Pressed	`#FE4E07`
Disabled	`#71717A` (텍스트: `#52525B`)

outline: hover/pressed 상태 없음 (기본 상태만 유지)
ghost: hover 시 opacity 0.8, pressed 시 텍스트 #FE4E07

색상 시스템 변경

vars.color.primary (테마 의존) → createVar()로 버튼 전용 색상 변수 선언
buttonOrange (#FF7C27), buttonGradient, buttonRed (#FE4E07) — 5세대 디자인 토큰에 맞춘 고정 색상
disabled 상태는 primitive color (color.gray500, color.gray600) 직접 참조

토큰 변경

packages/tokens/src/colors/colors.ts에 theme5th 추가 (primary: #FF7C27, secondary: #FE4E07, gradient)

변경된 파일

파일	변경 내용
`packages/button/src/Button.tsx`	타입 확장 (size 4종, variant 네이밍), leftIcon/rightIcon props, 아이콘 렌더링 로직
`packages/button/src/Button.css.ts`	전면 재작성 — createVar 색상, size/variant/interaction 스타일, disabled selectors
`packages/button/src/Button.stories.tsx`	모든 variant/size/disabled/icon 조합 스토리 추가, 실제적 SVG 아이콘 사용
`packages/button/src/Button.test.tsx`	16개 테스트 (size 4종, variant 3종, disabled, icon 3종, type 2종)
`packages/tokens/src/colors/colors.ts`	`theme5th` 및 `themeColor['5th']` 추가

Visuals

스토리북에서 다음 스토리를 확인할 수 있습니다:

Basic — 기본 fill/lg 버튼
Variants — fill, outline, ghost 비교
Sizes — sm, md, lg, xl 비교
Disabled — 각 variant별 disabled 상태
WithLeftIcon — 검색 아이콘 + 텍스트
WithRightIcon — 텍스트 + 화살표 아이콘
WithBothIcons — 다운로드 아이콘 + 텍스트 + 셰브론 아이콘
AllVariantsAndSizes — 전체 variant x size 매트릭스

Checklist

기능 명세를 작성했나요?
테스트 코드를 작성했나요?

Additional Discussion Points

추가 >> Breaking Change: ButtonVariant.filled → ButtonVariant.fill로 변경되었습니다. 기존에 variant="filled"를 사용하는 곳이 있다면 variant="fill"로 수정이 필요합니다.
Breaking Change: ButtonSize에서 기본값이 lg로 유지되지만, 기존 sm | lg에서 sm | md | lg | xl로 확장되었습니다.
색상 독립성: 버튼 색상이 테마 시스템(vars.color.primary)에서 분리되어 createVar()로 독립적으로 관리됩니다. 향후 테마 연동이 필요한 경우 buttonOrange 등의 CSS 변수를 외부에서 override할 수 있습니다.
요거는 추후 정민님과 논의후 반영예정입니다!Outline 상태: 디자인 스펙에 따라 outline variant는 hover/pressed 상태가 없어 추후 반영될 예정입니다.

changeset-bot · 2026-04-28T09:27:49Z

🦋 Changeset detected

Latest commit: 1f95a0a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@sipe-team/button	Major
@sipe-team/tokens	Minor
@sipe-team/side	Patch
@sipe-team/accordion	Patch
@sipe-team/avatar	Patch
@sipe-team/badge	Patch
@sipe-team/card	Patch
@sipe-team/checkbox	Patch
@sipe-team/chip	Patch
@sipe-team/divider	Patch
@sipe-team/input	Patch
@sipe-team/radio	Patch
@sipe-team/skeleton	Patch
@sipe-team/switch	Patch
@sipe-team/theme	Patch
@sipe-team/typography	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-04-28T09:27:50Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

main
release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: d760157d-d995-4bf9-8e4a-a0d4ca1252e8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/button-ver2-imporove-osohyun0224

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-04-28T09:29:27Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/button/src/Button.css.ts	`100.00% <100.00%> (ø)`
packages/button/src/Button.test.tsx	`100.00% <100.00%> (ø)`
packages/button/src/Button.tsx	`100.00% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Yeom-JinHo

Radix Slot만 확인해주시겠어요~?

나머지는 좋습니다 : )

Yeom-JinHo · 2026-04-28T14:10:56Z

  base: {
+    vars: {
+      [buttonOrange]: '#FF7C27',
+      [buttonGradient]: 'linear-gradient(225deg, #FF4500 0%, #FFB24D 100%)',


여기 추후 토큰이 그라디언트 자체로 끼워지는건가요?
color.gradient?

@Yeom-JinHo 넵넵 color.5th.gradient 처럼 5기 전용 그라디언트 토큰으로 들어가게 될 것 같습니다 hover 상태를 그라디언트 색상으로 진행하고 싶어하시더라고요!!

Yeom-JinHo · 2026-04-28T14:17:02Z

+    <Comp ref={ref} type={type} className={className} disabled={disabled} {...props}>
+      {leftIcon && <span className={styles.iconWrapper}>{leftIcon}</span>}
+      {children}
+      {rightIcon && <span className={styles.iconWrapper}>{rightIcon}</span>}
+    </Comp>


여기 다중 자식으로 변경해서 문제가 생길꺼 같아요~~

https://www.radix-ui.com/primitives/docs/utilities/slot

@Yeom-JinHo 진호님 감사합니다!! 버튼 컴포넌트가 이제 leftIcon, rightIcon이 있는 Button은 다중 자식 구조라서 Slottable을 적용하여 수정해서 재 반영해두겠습니다!! 리뷰 감사합니다 ~!

오 새로운거 알아갑니다~ 👍

잘 찾아주신 것 같습니다 👍🏻

…porove-osohyun0224

G-hoon · 2026-04-30T01:42:18Z

+      [buttonOrange]: '#FF7C27',
+      [buttonGradient]: 'linear-gradient(225deg, #FF4500 0%, #FFB24D 100%)',
+      [buttonRed]: '#FE4E07',
+    },


이것도 마찬가지로,
#258
에서 이미 semantic token 을 구축했으니,

여기만 독자적인 스타일을 쓰는 게 아니라,
시맨틱 토큰이 활용한 지 검토해주세요!

G-hoon · 2026-04-30T01:43:34Z

+      },
+      [ButtonSize.md]: {
+        height: '40px',
+        padding: '0 12px',


이것도 마찬가지로.
vars.spacing.component.md 처럼
시맨틱 토큰에 해당 내용이 있으니 확인해서 사용해주시면 좋을 것 같습니다.

G-hoon · 2026-04-30T01:47:34Z

-  pointerEvents: 'none',
+export const buttonOrange = createVar();
+export const buttonGradient = createVar();
+export const buttonRed = createVar();


이거 쓰지말고,

#258

에서,

packages/button/src/Button.css.ts

vars.color.accent.* 같은 걸로 쓸 수 있을지 검토해주세요

지훈님 말씀처럼 가능한 토큰 시스템 이용해주시면 v2 token으로 마이그레이션할 때도 수월할 것 같아요!

G-hoon · 2026-04-30T01:50:22Z

+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        border: 'none',
+        background: color.gray500,


backgroundColor: color.gray500,
가 이미 있어서 스타일이 중복되는 것 같습니다

G-hoon · 2026-04-30T01:53:07Z

    fontFamily: vars.typography.fontFamily,
    ':focus-visible': {
-      outline: `2px solid ${vars.color.border.focus}`,
+      outline: `2px solid ${buttonOrange}`,


포커스링은 브랜드 컬러보다는,
blue 계열이 일반적으로 더 적합한 것 같습니다 (WCAG 구분 가능성)

@3o14 님 크로스체크 부탁드립니다

G-hoon · 2026-04-30T01:53:42Z

+  primary: '#FF7C27',
+  secondary: '#FE4E07',
+  background: '#000000',
+  text: '#000000',


이거...
background 와 text 색이 같은데 이러면 색상이 잘 보일까요?

osohyun0224 added 2 commits April 28, 2026 18:24

feat(button): 5세대 디자인 시스템 기반 버튼 컴포넌트 전면 개편

8efad74

feat(button): add to changeset docs

90019aa

osohyun0224 requested review from 3o14, G-hoon, KYBee, Yeom-JinHo, froggy1014, haedawn, minjeeki and minji0214 as code owners April 28, 2026 09:27

auto-assign Bot assigned osohyun0224 Apr 28, 2026

Yeom-JinHo requested changes Apr 28, 2026

View reviewed changes

fix(Button): use Slottable for multi-child asChild compatibility

d95c953

osohyun0224 requested a review from Yeom-JinHo April 29, 2026 09:31

osohyun0224 added 3 commits April 29, 2026 18:37

Merge branch 'dev' into feature/button-ver2-imporove-osohyun0224

df65451

fix(Button): apply to typecheck CI

831d8af

Merge remote-tracking branch 'origin/dev' into feature/button-ver2-im…

1f95a0a

…porove-osohyun0224

minji0214 approved these changes Apr 29, 2026

View reviewed changes

KYBee approved these changes Apr 29, 2026

View reviewed changes

osohyun0224 enabled auto-merge (squash) April 29, 2026 14:25

osohyun0224 disabled auto-merge April 29, 2026 14:25

G-hoon reviewed Apr 30, 2026

View reviewed changes

Conversation

osohyun0224 commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

타입 시스템 변경

사이즈별 스펙

Variant 스타일

Interaction 상태 (fill 기준)

색상 시스템 변경

토큰 변경

변경된 파일

Visuals

Checklist

Additional Discussion Points

Uh oh!

changeset-bot Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

codecov Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Yeom-JinHo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

osohyun0224 commented Apr 28, 2026 •

edited

Loading

changeset-bot Bot commented Apr 28, 2026 •

edited

Loading

coderabbitai Bot commented Apr 28, 2026 •

edited

Loading

codecov Bot commented Apr 28, 2026 •

edited

Loading