Button

クリック可能なボタンコンポーネント。5つのバリアントと3つのサイズを提供します。

基本的な使い方

Preview

バリアント

Buttonコンポーネントは5つのバリアントを提供します。

Primary

Preview

Secondary

Preview

Outline

Preview

Ghost

Preview

Link

Preview

サイズ

Buttonコンポーネントは3つのサイズを提供します。

Preview

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'link'`	`'primary'`	ボタンのスタイルバリアント
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	ボタンのサイズ
`disabled`	`boolean`	`false`	ボタンを無効化
`className`	`string`	-	追加のCSSクラス

アクセシビリティ

<button> 要素を使用してセマンティックなHTML
キーボード操作対応（Enter, Space）
disabled 属性をサポート
フォーカスインジケータ表示

使用例

import { Button } from '@codeconnect-llc/design-system'

export function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked!')
  }

  return (
    <div>
      <Button variant="primary" size="lg" onClick={handleClick}>
        Submit
      </Button>
    </div>
  )
}