Button Component

デザインシステムのボタンコンポーネントです。様々なバリエーションとサイズを提供します。

Variants

Primary

Secondary

Outline

Ghost

Danger

Sizes

Small

Medium

Large

States

Normal

Disabled

As Link

Link Button Outline Link

Usage

Basic Usage

---
import { Button } from '../../../components/Button.astro';
---

<Button variant="primary" size="medium">
  Primary Button
</Button>

All Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Sizes

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

API

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	ボタンのバリエーション
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	ボタンのサイズ
`disabled`	`boolean`	`false`	無効化状態
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML button type