From 193be007c8756a3112ae458e57d826a43a345644 Mon Sep 17 00:00:00 2001
From: Masato Honda <honda_masato_xa@cyberagent.co.jp>
Date: Wed, 24 Jun 2026 15:26:26 +0900
Subject: [PATCH] =?UTF-8?q?docs(spindle-ui):=20buttonGroup=E3=81=A8button?=
 =?UTF-8?q?=E3=81=AEDesign=20Doc=E3=81=A8Storybook=E3=81=AB=E4=B8=A6?=
 =?UTF-8?q?=E3=81=B3=E9=A0=86=E3=82=AC=E3=82=A4=E3=83=89=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ButtonGroup/ButtonGroup.mdx           | 16 ++++++++++++++
 .../src/ButtonGroup/ButtonGroup.stories.tsx   | 18 +++++++--------
 .../spindle-ui/src/ButtonGroup/design-doc.md  | 22 +++++++++++++++++++
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
index 2e64331cf..dd0b5405f 100644
--- a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
+++ b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
@@ -230,6 +230,22 @@ import '@openameba/spindle-ui/ButtonGroup/ButtonGroup.css';
   `}
 />
 
+## 並び順のガイドライン
+
+ContainedボタンとOutlinedボタンを組み合わせる際は、以下の配置ルールに従ってください。
+
+### 縦に並べる場合
+
+Outlinedボタンを**下**に配置します。
+
+<Story of={ButtonGroupStories.ColumnDirectionWithLargeButtons} />
+
+### 横に並べる場合
+
+Outlinedボタンを**左**に配置します。
+
+<Story of={ButtonGroupStories.RowDirectionWithLargeButtons} />
+
 ## Baseline
 
 Widely available
diff --git a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
index 5b1f2a07c..7599a8471 100644
--- a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -15,12 +15,12 @@ export const RowDirectionWithLargeButtons: Story = {
   render: () => (
     <>
       <ButtonGroup direction="row" size="large">
-        <Button size="large" variant="contained">
-          新規登録
-        </Button>
         <Button size="large" variant="outlined">
           ログイン
         </Button>
+        <Button size="large" variant="contained">
+          新規登録
+        </Button>
       </ButtonGroup>
     </>
   ),
@@ -41,12 +41,12 @@ export const RowDirectionWithMediumButtons: Story = {
   render: () => (
     <>
       <ButtonGroup direction="row" size="medium">
-        <Button size="medium" variant="contained">
-          新規登録
-        </Button>
         <Button size="medium" variant="outlined">
           ログイン
         </Button>
+        <Button size="medium" variant="contained">
+          新規登録
+        </Button>
       </ButtonGroup>
     </>
   ),
@@ -71,12 +71,12 @@ export const RowDirectionWithSmallButtons: Story = {
   render: () => (
     <>
       <ButtonGroup direction="row" size="small">
-        <Button size="small" variant="contained">
-          新規登録
-        </Button>
         <Button size="small" variant="outlined">
           ログイン
         </Button>
+        <Button size="small" variant="contained">
+          新規登録
+        </Button>
       </ButtonGroup>
     </>
   ),
diff --git a/packages/spindle-ui/src/ButtonGroup/design-doc.md b/packages/spindle-ui/src/ButtonGroup/design-doc.md
index 622568483..2ac3b6096 100644
--- a/packages/spindle-ui/src/ButtonGroup/design-doc.md
+++ b/packages/spindle-ui/src/ButtonGroup/design-doc.md
@@ -11,6 +11,18 @@ ButtonGroupは、複数のボタンを横並び（row）または縦並び（col
 
 ## スクリーンショット
 
+### 縦並びの例
+
+ContainedボタンとOutlinedボタンを縦に並べる場合、Outlinedボタンを下に配置します。
+
+![縦並びのボタン配置例](https://github.com/user-attachments/assets/dd5771bf-72ec-4c86-abdc-be9f08a18960)
+
+### 横並びの例
+
+ContainedボタンとOutlinedボタンを横に並べる場合、Outlinedボタンを左に配置します。
+
+![横並びのボタン配置例](https://github.com/user-attachments/assets/f4ded303-ff16-49c8-a3fc-a5924dc70311)
+
 ## 使用例
 
 ButtonGroupは、`direction`プロパティで配置方向を、`size`プロパティでボタン間の間隔を指定します。横並びの場合は`direction="row"`を指定します。
@@ -33,6 +45,16 @@ ButtonGroupは、`direction`プロパティで配置方向を、`size`プロパ
 
 ButtonGroupの`size`プロパティは、子要素のButtonの`size`プロパティと一致させることを推奨します。一致させることで想定された余白が確保されます。`size`が異なる場合でも利用できますが、想定された値になっているか確認してください。
 
+### DO
+
+- ContainedボタンとOutlinedボタンを**縦に並べる**場合は、Outlinedボタンを下に配置します
+- ContainedボタンとOutlinedボタンを**横に並べる**場合は、Outlinedボタンを左に配置します
+
+### DO NOT
+
+- ContainedボタンとOutlinedボタンを縦に並べる際に、Outlinedボタンを上に配置しないでください
+- ContainedボタンとOutlinedボタンを横に並べる際に、Outlinedボタンを右に配置しないでください
+
 ## 要素
 
 ### Design Tokens