sellmate-design-system-react 9.0.0-beta.97 → 9.0.0-beta.98

package/AGENTS.md

@@ -1343,6 +1343,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 | **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
+| **본문·목록 사이에 끼어 서는 작은 부가 버튼** (추천 질문·출처 바로가기) | **`SButton pill color="neutral" outline`** (아래 3-5-6) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
 
@@ -1484,6 +1485,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
 - 완료된 작업 버튼은 제거하지 않고 **`disabled` 로 남긴다.** 자리가 사라지면 행 높이가 흔들린다.
 - **모달 보조 액션은 `color="neutral" outline`** 이 표준이다.
+- **`pill` 은 본문·목록 사이에 끼어 서는 작은 부가 버튼에만 준다** — 추천 질문·출처 바로가기처럼 누르면 동작하는 알약. 보통 `color="neutral" outline size="xs"` 와 함께 쓴다. 화면의 주 액션·폼 제출·하단 버튼은 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다. 알약 모양을 `className="rounded-full"` 로 직접 만들지 않는다.
 
 **하단 버튼 배치 (모든 화면 공통)** — 그룹을 모아 정렬하지 않고 **양끝으로 벌린다**(`justify-between`).
 

package/dist/components/SButton/README.md

@@ -14,6 +14,7 @@
 | `icon?` | `SIconName` | — | 레이블 왼쪽 아이콘 |
 | `rightIcon?` | `SIconName` | — | 레이블 오른쪽 아이콘 |
 | `label?` | `string` | — | 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) |
+| `pill?` | `boolean` | `false` | 모서리를 완전히 둥글게(알약 모양). 색·크기·아이콘은 그대로다. 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**에 쓴다 — 출처 배지·추천 질문처럼. 보통 `color="neutral" outline` 과 함께 쓴다(흰 면 + 옅은 테두리). 화면의 주 액션·폼 제출 버튼은 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다. |
 
 ## Types
 

package/dist/components/SButton/SButton.d.ts

@@ -14,10 +14,18 @@ export interface SButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
     rightIcon?: SIconName;
     /** 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) */
     label?: string;
+    /**
+     * 모서리를 완전히 둥글게(알약 모양). 색·크기·아이콘은 그대로다.
+     *
+     * 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**에 쓴다 — 출처 배지·추천 질문처럼.
+     * 보통 `color="neutral" outline` 과 함께 쓴다(흰 면 + 옅은 테두리). 화면의 주 액션·폼 제출 버튼은
+     * 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다.
+     */
+    pill?: boolean;
 }
 /**
  * SButton — sd-button 포팅.
- * color(4) × outline × 4개 사이즈, 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
+ * color(4) × outline × 4개 사이즈, 아이콘(icon/rightIcon), pill 모양, 컴포넌트 토큰(--cmp-button-*) 기반.
  * 텍스트는 label(문자열)로만 받는다. 이벤트: sdClick → 네이티브 onClick.
  */
 export declare const SButton: import("react").ForwardRefExoticComponent<SButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/index.cjs

@@ -4261,6 +4261,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
   icon,
   rightIcon,
   label,
+  pill = false,
   className,
   style,
   type = "button",
@@ -4291,7 +4292,8 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
     "minHeight": s.height,
     "minWidth": iconOnly ? s.iconOnlyWidth : hasLabel ? s.minWidth : void 0,
     "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
+    // 버튼 전용 pill 반경 토큰이 아직 없어 공용 반경을 쓴다
+    "borderRadius": pill ? "var(--radius-full)" : s.radius,
     "gap": s.gap,
     "fontSize": s.fontSize,
     "fontWeight": s.fontWeight,