ボタン（Button）
クリックで操作を実行するボタンUIの実装を4つのアプローチで比較。 バリアント・サイズ・ローディング状態・アイコン統合など、実践的な使用例をインタラクティブに確認できます。
Mantine Button
Mantineが提供する高機能ボタンコンポーネント。filled・outline・light・subtle・gradient など6種類のvariantと、 xs〜xl の5サイズを標準サポート。Button.Group でグループ化も可能。
6種バリアント5サイズButton.Groupグラデーションローディング内蔵
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, Button, Group } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantineButtonDemo() {
const [loading, setLoading] = useState(false);
const handleClick = () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
};
return (
<MantineProvider>
<Group gap="sm" wrap="wrap">
<Button variant="filled">filled</Button>
<Button variant="outline">outline</Button>
<Button variant="light">light</Button>
<Button variant="subtle">subtle</Button>
<Button variant="default">default</Button>
<Button disabled>disabled</Button>
<Button loading={loading} onClick={handleClick}>loading</Button>
</Group>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったボタンUIを実装してください。
- 使用ライブラリ: @mantine/core の Button コンポーネント
- バリアント：filled・outline・light・subtle・gradient・default の6種類
- カラースキーム：MantineProvider のカラーパレット（blue・green・red・yellow・gray）を使用
- サイズ：xs・sm・md・lg・xl の5段階（size prop で指定）
- ローディング状態：loading prop でスピナーを自動表示し、クリックを無効化
- 無効状態：disabled prop で半透明表示＋クリック不可
- アイコン統合：leftSection・rightSection props でアイコンを左右に配置
- Button.Group コンポーネントで複数ボタンをグループ化
- グラデーション背景バリアント（variant="gradient" + gradient={{ from, to }}）の実装⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS / Tailwind |
|---|---|---|---|---|
| バリアント数 | ✅ 6種（gradient含む） | ✅ 5タイプ | ✅ 6種（destructive含む） | ⚠️ 自作（無制限） |
| サイズ | ✅ xs〜xl（5段階） | ✅ small・middle・large | ✅ sm・default・lg・icon | ✅ 自由に設定可能 |
| ローディング状態 | ✅ loading prop | ✅ loading prop | ⚠️ Loader2アイコンで自作 | ⚠️ CSS animationで自作 |
| アイコン統合 | ✅ leftSection / rightSection | ✅ icon prop | ✅ children内に配置 | ⚠️ 手動で配置 |
| グループ化 | ✅ Button.Group | ⚠️ Space コンポーネント | ⚠️ flexboxで手動 | ⚠️ flexboxで手動 |
| 危険系アクション | ⚠️ color="red" で代替 | ✅ danger prop | ✅ destructive variant | ⚠️ カラー選択で対応 |
| カスタマイズ性 | ⚠️ テーマ依存 | ⚠️ テーマ依存 | ✅ コードが手元にある | ✅ 完全自由 |
| アクセシビリティ | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA準拠 | ✅ Radix UIベース | ⚠️ 実装者次第 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ 使った分だけ | ✅ ゼロ追加 |
選択のポイント
- Mantine — グラデーションボタンや Button.Group など、リッチな表現を手軽に実現したい場合に最適。 カラーパレットが豊富で、デザインシステムとして使いやすい。 すでに Mantine を採用しているプロジェクトなら迷わず選択。
- Ant Design — danger prop による危険系アクションの明示や、circle・round シェイプなど、 エンタープライズ向けの多様なユースケースをカバーしたい場合に最適。 管理画面や業務システムとの相性が良い。
- shadcn/ui — コンポーネントのコードがプロジェクトに直接コピーされるため、完全にカスタマイズ可能。 Radix UI ベースでアクセシビリティが高く、Tailwind CSS との相性が抜群。 ライブラリへの依存を最小化しながら、高品質な UI を実現したい場合に最適。
- CSS / Tailwind CSS — 外部ライブラリへの依存を避けたい、デザインを完全にコントロールしたい場合に最適。 バンドルサイズを最小化でき、デザイナーとの協業でもスタイルの調整がしやすい。 小規模プロジェクトや独自のデザインシステム構築に向いている。