Skip to content

docs(spindle-ui): ButtonのDesign DocにContained/Outlined並び順ガイドラインを追加 #2156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MasatoHonda wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(spindle-ui): ButtonのDesign DocにContained/Outlined並び順ガイドラインを追加 #2156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,22 @@ import '@openameba/spindle-ui/ButtonGroup/ButtonGroup.css';
`}
/>

## 並び順のガイドライン

ContainedボタンとOutlinedボタンを組み合わせる際は、以下の配置ルールに従ってください。

### 縦に並べる場合

Outlinedボタンを**下**に配置します。

<Story of={ButtonGroupStories.ColumnDirectionWithLargeButtons} />

### 横に並べる場合

Outlinedボタンを**左**に配置します。

@herablog herablog Jun 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

記述と描画が違いそうっす
Image

@MasatoHonda MasatoHonda Jun 11, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

あ、これはStorybook側から考え直さないといけなかった可能性がありますね…？

@herablog herablog Jun 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Storybookの例が違ってたら直しちゃいたいっすね！


<Story of={ButtonGroupStories.RowDirectionWithLargeButtons} />

## Baseline

Widely available
Expand Down
18 changes: 9 additions & 9 deletions packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
),
Expand All @@ -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>
</>
),
Expand All @@ -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>
</>
),
Expand Down
22 changes: 22 additions & 0 deletions packages/spindle-ui/src/ButtonGroup/design-doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"`を指定します。
Expand All @@ -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
Expand Down
Loading