ボタン（Button）

クリックで操作を実行するボタンUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind の6種で比較。バリアント・サイズ・ローディング状態・アイコン統合など、実践的な使用例をインタラクティブに確認できます。

@mantine/corev9.1.1 antdv6.3.7 shadcn/uiv4.2.0 @chakra-ui/reactv3.34.0 @mui/materialv9.0.0

💡 ネイティブ実装：フォーム送信・ローディング・無効化は、button 要素と CSS だけでも実装できます。送信ボタン（button[type=submit]） →

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	Chakra UI	MUI	CSS / Tailwind
バリアント数	✅ 6種（gradient含む）	✅ 5タイプ	✅ 6種（destructive含む）	✅ 4種（solid・outline・ghost・subtle）	✅ 3種（contained・outlined・text）	⚠️ 自作（無制限）
サイズ	✅ xs〜xl（5段階）	✅ small・middle・large	✅ sm・default・lg・icon	✅ sm・md・lg（3段階）	✅ small・medium・large（3段階）	✅ 自由に設定可能
ローディング状態	✅ loading prop	✅ loading prop	⚠️ Loader2アイコンで自作	✅ loading prop	✅ loading prop（v6）/ CircularProgressで自作	⚠️ CSS animationで自作
アイコン統合	✅ leftSection / rightSection	✅ icon prop	✅ children内に配置	✅ children内に配置	✅ startIcon / endIcon props	⚠️ 手動で配置
グループ化	✅ Button.Group	⚠️ Space コンポーネント	⚠️ flexboxで手動	✅ Group コンポーネント	✅ ButtonGroup	⚠️ flexboxで手動
危険系アクション	⚠️ color="red" で代替	✅ danger prop	✅ destructive variant	⚠️ colorPalette="red" で代替	✅ color="error" で対応	⚠️ カラー選択で対応
カスタマイズ性	⚠️ テーマ依存	⚠️ テーマ依存	✅ コードが手元にある	✅ colorPalette で柔軟に対応	⚠️ sx prop・テーマで対応	✅ 完全自由
アクセシビリティ	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	✅ Radix UIベース	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	⚠️ 実装者次第
TypeScript	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート
バンドルサイズ	⚠️ 中（全体で大）	⚠️ 中（全体で大）	✅ 使った分だけ	⚠️ 中（emotion含む）	⚠️ 中（Emotion込みで大きめ）	✅ ゼロ追加

選択のポイント

Mantine — グラデーションボタンや Button.Group など、リッチな表現を手軽に実現したい場合に最適。カラーパレットが豊富で、デザインシステムとして使いやすい。すでに Mantine を採用しているプロジェクトなら迷わず選択。
MUI — Material Designに準拠した業界標準のUIライブラリ。週670万DLと圧倒的なシェアを誇り、 StackOverflowやGitHubの事例が豊富。エンタープライズ〜スタートアップまで幅広く採用されており、デザインシステムとして成熟している。Emotion（CSS-in-JS）を使用するため、 Tailwind CSS v4との併用時はスタイル干渉に注意が必要。
Ant Design — danger prop による危険系アクションの明示や、circle・round シェイプなど、エンタープライズ向けの多様なユースケースをカバーしたい場合に最適。管理画面や業務システムとの相性が良い。
shadcn/ui — コンポーネントのコードがプロジェクトに直接コピーされるため、完全にカスタマイズ可能。 Radix UI ベースでアクセシビリティが高く、Tailwind CSS との相性が抜群。ライブラリへの依存を最小化しながら、高品質な UI を実現したい場合に最適。
Chakra UI — colorPalette prop によるカラーテーマの柔軟な切り替えが特徴。シンプルなAPIで直感的に扱えるため、学習コストが低い。アクセシビリティが標準で高水準。Emotion（CSS-in-JS）を使用するため、 Tailwind CSS v4 との併用時はスタイル干渉に注意が必要。
CSS / Tailwind CSS — 外部ライブラリへの依存を避けたい、デザインを完全にコントロールしたい場合に最適。バンドルサイズを最小化でき、デザイナーとの協業でもスタイルの調整がしやすい。小規模プロジェクトや独自のデザインシステム構築に向いている。