Button

Button

ユーザーのアクションを受け付ける基本的なインタラクティブ要素です。MUI の Button コンポーネントをベースとしています。

Variants

• Contained: 主要なアクション用（塗りつぶし）
• Outlined: 補助的なアクション用（枠線）
• Text: 控えめなアクション用（テキストのみ）

Sizes

• small: コンパクトな UI 向け（高さ 32px）
• medium: 標準サイズ（高さ 40px）
• large: 強調したい場合（高さ 48px）

使用例

import { Button, PlaybookProvider } from "@playbook/ui";

// PlaybookProvider でアプリケーションをラップ
<PlaybookProvider>
  {/* Contained（デフォルト） */}
  <Button variant="contained">送信</Button>

  {/* Outlined + Small */}
  <Button variant="outlined" size="small">キャンセル</Button>

  {/* Text */}
  <Button variant="text">詳細を見る</Button>
</PlaybookProvider>

Props

MUI Button の全 props をサポートしています。主要なものを以下に示します：

Prop	Type	Default	Description
variant	"contained" | "outlined" | "text"	"text"	ボタンの見た目
size	"small" | "medium" | "large"	"medium"	ボタンのサイズ
color	"primary" | "secondary" | "error" | ...	"primary"	ボタンの色
disabled	boolean	false	無効状態
children	ReactNode	—	ボタンのラベル

アクセシビリティ

• MUI Button はネイティブの <button> 要素をレンダリング
• disabled 属性でスクリーンリーダーに状態を伝達
• フォーカスリング（:focus-visible）が自動的に適用
• キーボードナビゲーション（Enter / Space）をサポート

実装のポイント

MUI Button を re-export し、テーマの styleOverrides でカスタマイズしています：

Button.tsx

export { default as Button } from "@mui/material/Button";
export type { ButtonProps } from "@mui/material/Button";

tokens/theme.ts

export const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: { disableElevation: true },
      styleOverrides: {
        root: { textTransform: "none", fontWeight: 500 },
        sizeSmall: { height: "32px" },
        sizeMedium: { height: "40px" },
        sizeLarge: { height: "48px" },
      },
    },
  },
});