Button
アクションをトリガーするためのインタラクティブなボタンコンポーネント
Variants
異なるコンテキストに応じた5種類のバリアント
Primary
Secondary
Outline
Ghost
Destructive
Sizes
3つのサイズオプション
States
様々な状態のボタン
With Icons
アイコン付きボタン
Usage
コンポーネントの使用例
tsx
class="token keyword">import { Button } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
class="token keyword">class=class="token keyword">class="token string">"token comment">// Basic
<class="token tag">Button>Click me</class="token tag">Button>
class="token keyword">class=class="token keyword">class="token string">"token comment">// Variants
<class="token tag">Button variant=class="token keyword">class="token string">"primary">Primary</class="token tag">Button>
<class="token tag">Button variant=class="token keyword">class="token string">"secondary">Secondary</class="token tag">Button>
<class="token tag">Button variant=class="token keyword">class="token string">"outline">Outline</class="token tag">Button>
<class="token tag">Button variant=class="token keyword">class="token string">"ghost">Ghost</class="token tag">Button>
<class="token tag">Button variant=class="token keyword">class="token string">"destructive">Delete</class="token tag">Button>
class="token keyword">class=class="token keyword">class="token string">"token comment">// Sizes
<class="token tag">Button size=class="token keyword">class="token string">"sm">Small</class="token tag">Button>
<class="token tag">Button size=class="token keyword">class="token string">"md">Medium</class="token tag">Button>
<class="token tag">Button size=class="token keyword">class="token string">"lg">Large</class="token tag">Button>
class="token keyword">class=class="token keyword">class="token string">"token comment">// States
<class="token tag">Button disabled>Disabled</class="token tag">Button>
<class="token tag">Button loading>Loading</class="token tag">Button>
class="token keyword">class=class="token keyword">class="token string">"token comment">// With click handler
<class="token tag">Button onClick$={() => console.class="token function">log(class="token keyword">class="token string">"clicked")}>
Click me
</class="token tag">Button>Props
コンポーネントのプロパティ
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "primary" | ボタンのスタイルバリアント |
| size | "sm" | "md" | "lg" | "md" | ボタンのサイズ |
| disabled | boolean | false | 無効状態 |
| loading | boolean | false | ローディング状態 |
| onClick$ | QRL<() => void> | - | クリックハンドラー |