Button

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

インポート

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

個別サブパス（バンドルサイズを抑えたい場合）:

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

基本的な使い方

<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>

Iconは内部でaria-hiddenになるため、テキストラベルの無いアイコンのみのボタンには必ずaria-labelを付与してください（スクリーンリーダーに操作内容が伝わらなくなるため）。

<Button shape="square" variant="ghost" aria-label="検索">
  <Icon name="Search" 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>

ローディング状態

loading propを使うとスピナー表示・disabled・aria-busyが自動で付与されます。手動でIcon name="Loader2"を組み立てる必要はありません。

<Button loading>処理中...</Button>
<Button variant="primary" loading>保存中...</Button>

asChild使用時（<Button asChild loading><a>...</a></Button>）は、Radix Slotが単一の子要素しか受け付けられないためスピナーは描画されません。また<a>はHTMLのdisabled属性に対応しないため、ネイティブのdisabledは効きません。代わりにaria-disabled="true" + tabIndex={-1} + pointer-events-noneクラスが付与され、クリック・キーボード操作の両方が実質的に無効化されます（disabled単体をasChildで使った場合も同様）。aria-busyは引き続き適用されます。

実際の使用例

フォームの送信ボタン

<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`	無効状態
`loading`	`boolean`	`false`	ローディング状態。trueでスピナー表示+自動的に無効化+aria-busy付与。asChild使用時はスピナー描画のみ行わない（disabled/aria-busyは適用される）

Button

On this page