Button

汎用ボタンコンポーネント。クリックアクションのトリガーに使用します。

インポート

import { Button } from '@caroainc/ui-components'

基本的な使い方

<Button>ボタン</Button>

バリアント

<Button>Base (Default)</Button>
<Button variant="primary">Primary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

サイズ

<Button size="xs">XS</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="xl">XL</Button>

無効状態

<Button disabled>Disabled</Button>

アイコン付きボタン

<Button>
  <Icon name="Plus" size="sm" />
  新規作成
</Button>
<Button variant="primary">
  <Icon name="Download" size="sm" />
  ダウンロード
</Button>

正方形ボタン（アイコンのみ）

shape="square"を使用すると、アイコンのみの正方形ボタンになります。

<Button shape="square" variant="outline">
  <Icon name="Search" size="sm" />
</Button>
<Button shape="square" variant="ghost">
  <Icon name="MoreHorizontal" size="sm" />
</Button>

円形ボタン（アイコンのみ）

shape="circle"を使用すると、アイコンのみの円形ボタンになります。チャット送信ボタンやFABなどに適しています。

<Button shape="circle">
  <Icon name="ArrowUp" size="sm" />
</Button>
<Button shape="circle" variant="primary">
  <Icon name="Send" size="default" />
</Button>

ローディング状態

<Button disabled>
  <Icon name="Loader2" size="sm" className="animate-spin" />
  処理中...
</Button>

実際の使用例

フォームの送信ボタン

<div className="flex gap-2">
  <Button variant="outline">キャンセル</Button>
  <Button variant="primary">保存する</Button>
</div>

削除確認

<div className="flex gap-2">
  <Button variant="outline">キャンセル</Button>
  <Button variant="destructive">削除する</Button>
</div>

ツールバー

<div className="flex gap-1 p-1 bg-muted rounded-lg">
  <Button size="sm" shape="square" variant="ghost">
    <Icon name="Bold" size="sm" />
  </Button>
  <Button size="sm" shape="square" variant="ghost">
    <Icon name="Italic" size="sm" />
  </Button>
  {/* ... */}
</div>

asChildでリンクとして使用

<Button asChild>
  <a href="/settings">設定へ</a>
</Button>

Props

Prop	Type	Default	Description
`variant`	`'base' \| 'primary' \| 'destructive' \| 'success' \| 'warning' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'base'`	ボタンのスタイルバリアント
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	ボタンのサイズ
`shape`	`'default' \| 'square' \| 'circle'`	`'default'`	ボタンの形状。square: 正方形、circle: 円形（アイコンのみの場合）
`asChild`	`boolean`	`false`	子要素をボタンとしてレンダリング（Radix Slot使用）
`disabled`	`boolean`	`false`	無効状態

Button

On this page