Button

M3 のボタン。filled / tonal / outlined / elevated / text の 5 バリアントをサポートし、先頭・末尾アイコンとリップル効果を備えます。

参考: Material Design 3 公式ガイドライン m3.material.io/components/buttons/overview

ライブデモ

Import

import { Button, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<ThemeProvider seed="#6750A4" scheme="tonalSpot" mode="system">
  <Button variant="filled">送信</Button>
  <Button variant="outlined">キャンセル</Button>
</ThemeProvider>

Props

Prop	型	既定値	説明
`variant`	`'filled' \| 'tonal' \| 'outlined' \| 'elevated' \| 'text'`	`'filled'`	M3 ボタンバリアント
`startIcon`	`ReactNode`	—	先頭アイコン（18dp）
`endIcon`	`ReactNode`	—	末尾アイコン（18dp）
`ripple`	`boolean`	`true`	押下時のリップル表示
`disabled`	`boolean`	—	ネイティブ button の disabled