Félix Malfait
5d438bb70c
## Summary - **New Getting Started section** with quickstart guide and restructured navigation - **Halftone-style illustrations** for User Guide and Developer introduction cards using a Canvas 2D filter script - **Removed hero images** (`image:` frontmatter + `<Frame><img>` blocks) from all user-guide article pages - **Cleaned up translations** (13 languages): removed hero images and updated introduction cards to use halftone style - **Cleaned up twenty-ui pages**: removed outdated hero images from component docs - **Deleted orphaned images**: `table.png`, `kanban.png` - **Developer page**: fixed duplicate icon, switched to 3-column layout ## Test plan - [ ] Verify docs site builds without errors - [ ] Check User Guide introduction page renders halftone card images in both light and dark mode - [ ] Check Developer introduction page renders 3-column layout with distinct icons - [ ] Confirm article pages no longer show hero images at the top - [ ] Spot-check a few translated pages to ensure hero images are removed 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@twenty.com>
439 lines
20 KiB
Plaintext
439 lines
20 KiB
Plaintext
---
|
|
title: ボタン
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="ヘッダー" />
|
|
</Frame>
|
|
|
|
アプリ全体で使用されるボタンおよびボタングループの一覧。
|
|
|
|
## ボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="タイトル"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="default"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("クリック")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| --------- | --------------------- | ------------------------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
|
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
|
| タイトル | string | ボタンのテキスト内容 |
|
|
| fullWidth | ブール型 | ボタンがコンテナの全幅を占めるかどうかを定義します |
|
|
| バリアント | string | ボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
|
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
|
|
| accent | string | ボタンのアクセント色。 オプションは `default`、`blue`、`danger` を含みます |
|
|
| 間もなく | ブール型 | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。 |
|
|
| disabled | ブール型 | ボタンが無効かどうかを指定します |
|
|
| focus | ブール型 | ボタンにフォーカスがあるかどうかを決定します |
|
|
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## ボタングループ
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<ButtonGroup variant="primary" size="large" accent="blue" className>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="ボタン 1"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("クリック")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="ボタン 2"
|
|
fullWidth={false}
|
|
variant="secondary"
|
|
size="medium"
|
|
position="left"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("クリック")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="ボタン 3"
|
|
fullWidth={false}
|
|
variant="tertiary"
|
|
size="medium"
|
|
position="right"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("クリック")}
|
|
/>
|
|
</ButtonGroup>
|
|
);
|
|
};
|
|
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| --------- | --------- | ---------------------------------------------------------------------- |
|
|
| バリアント | string | グループ内のボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます |
|
|
| サイズ | string | グループ内のボタンのサイズ。 オプションは2つ：`medium` と `small` |
|
|
| accent | string | グループ内のボタンのアクセント色。 オプションは `default`、`blue`、 `danger` を含みます |
|
|
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
|
| children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 浮動ボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButton
|
|
className
|
|
Icon={IconSearch}
|
|
title="タイトル"
|
|
size="medium"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| ----------- | --------------------- | ------------------------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプション名 |
|
|
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
|
| タイトル | string | ボタンのテキスト内容 |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
|
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`middle`、 `right` を含みます |
|
|
| applyShadow | ブール型 | ボタンにシャドウを適用するかどうかを決定します |
|
|
| applyBlur | ブール型 | ボタンにぼかし効果を適用するかどうかを決定します |
|
|
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
|
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 浮動ボタングループ
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButtonGroup size="small">
|
|
<FloatingButton
|
|
className
|
|
Icon={IconClipboardText}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
<FloatingButton
|
|
className
|
|
Icon={IconCheckbox}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
/>
|
|
</FloatingButtonGroup>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 | デフォルト |
|
|
| -------- | --------- | ------------------------------------ | ----- |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` | small |
|
|
| children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列 | |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 浮動アイコンボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingIconButton
|
|
className
|
|
Icon={IconSearch}
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("クリック")}
|
|
isActive={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| ----------- | --------------------- | ------------------------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプション名 |
|
|
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
|
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
|
|
| applyShadow | ブール型 | ボタンにシャドウを適用するかどうかを決定します |
|
|
| applyBlur | ブール型 | ボタンにぼかし効果を適用するかどうかを決定します |
|
|
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
|
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
|
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
|
| isActive | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 浮動アイコンボタングループ
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
const iconButtons = [
|
|
{
|
|
Icon: IconClipboardText,
|
|
onClick: () => console.log("ボタン 1 がクリックされました"),
|
|
isActive: true,
|
|
},
|
|
{
|
|
Icon: IconCheckbox,
|
|
onClick: () => console.log("ボタン 2 がクリックされました"),
|
|
isActive: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<FloatingIconButtonGroup
|
|
className
|
|
size="small"
|
|
iconButtons={iconButtons} />
|
|
);
|
|
};
|
|
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプション名 |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
|
| iconButtons | array | グループ内のアイコンボタンをそれぞれ表すオブジェクトの配列。 各オブジェクトには、ボタンに表示したいアイコンコンポーネント、ユーザーがボタンをクリックした時に呼び出される関数、およびボタンをアクティブにするかどうかが含まれる必要があります。 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## ライトボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { LightButton } from "@/ui/input/button/components/LightButton";
|
|
|
|
export const MyComponent = () => {
|
|
return <LightButton
|
|
className
|
|
icon={null}
|
|
title="タイトル"
|
|
accent="secondary"
|
|
active={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={()=>console.log('クリック')}
|
|
/>;
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| --------- | ----------------- | ------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプション名 |
|
|
| アイコン | `React.ReactNode` | ボタンに表示したいアイコン |
|
|
| タイトル | string | ボタンのテキスト内容 |
|
|
| accent | string | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
|
|
| アクティブ | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
|
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
|
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
|
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## ライトアイコンボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<LightIconButton
|
|
className
|
|
testId="test1"
|
|
Icon={IconSearch}
|
|
title="タイトル"
|
|
size="small"
|
|
accent="secondary"
|
|
active={true}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("クリック")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| --------- | --------------------- | ------------------------------------------------ |
|
|
| className | string | 追加のスタイリングのためのオプション名 |
|
|
| testId | string | ボタンのテスト識別子 |
|
|
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
|
| タイトル | string | ボタンのテキスト内容 |
|
|
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
|
| accent | string | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
|
|
| アクティブ | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
|
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
|
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
|
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## メインボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { MainButton } from "@/ui/input/button/components/MainButton";
|
|
import { IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<MainButton
|
|
title="チェックボックス"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
soon={false}
|
|
Icon={IconCheckbox}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| -------------------- | -------------------------------- | ------------------------------------------------------ |
|
|
| タイトル | string | ボタンのテキスト内容 |
|
|
| fullWidth | ブール型 | ボタンがコンテナの全幅を占めるかどうかを定義します |
|
|
| バリアント | string | ボタンの視覚スタイルのバリアント。 オプションは `primary` と `secondary` を含みます |
|
|
| 間もなく | ブール型 | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。 |
|
|
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
|
| React `button` props | `React.ComponentProps<'button'>` | 標準的なHTMLボタンのプロパティすべてがサポートされています |
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 丸型アイコンボタン
|
|
|
|
<Tabs>
|
|
<Tab title="使用方法">
|
|
```jsx
|
|
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<RoundedIconButton
|
|
Icon={IconSearch}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="プロパティ">
|
|
| プロパティ | タイプ | 説明 |
|
|
| -------------------- | ----------------------------------------------- | -- |
|
|
| アイコン | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
</Tab>
|
|
</Tabs>
|