Button ボタン

ボタンコンポーネントです。複数のタイプ・サイズ・ステータス、および中華風テーマカラーをサポートします。

基本的な使い方

vue

<script setup lang="ts">
</script>

<template>
  <!-- デフォルト -->
  <LhButton>デフォルトボタン</LhButton>
  <!-- primary -->
  <LhButton type="primary">メインボタン</LhButton>
  <!-- success -->
  <LhButton type="success">成功ボタン</LhButton>
  <!-- warning -->
  <LhButton type="warning">警告ボタン</LhButton>
  <!-- danger -->
  <LhButton type="danger">危険ボタン</LhButton>
  <!-- info -->
  <LhButton type="info">情報ボタン</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- デフォルト -->
  <LhButton>デフォルトボタン</LhButton>
  <!-- primary -->
  <LhButton type="primary">メインボタン</LhButton>
  <!-- success -->
  <LhButton type="success">成功ボタン</LhButton>
  <!-- warning -->
  <LhButton type="warning">警告ボタン</LhButton>
  <!-- danger -->
  <LhButton type="danger">危険ボタン</LhButton>
  <!-- info -->
  <LhButton type="info">情報ボタン</LhButton>
</template>

サイズ

vue

<script setup lang="ts">
</script>

<template>
  <LhButton size="large">大きいボタン</LhButton>
  <LhButton>デフォルトボタン</LhButton>
  <LhButton size="small">小さいボタン</LhButton>
  <LhButton size="mini">ミニボタン</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton size="large">大きいボタン</LhButton>
  <LhButton>デフォルトボタン</LhButton>
  <LhButton size="small">小さいボタン</LhButton>
  <LhButton size="mini">ミニボタン</LhButton>
</template>

プレーンボタン

vue

<script setup lang="ts">
</script>

<template>
  <LhButton plain>プレーンボタン</LhButton>
  <LhButton type="primary" plain>メインボタン</LhButton>
  <LhButton type="success" plain>成功ボタン</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton plain>プレーンボタン</LhButton>
  <LhButton type="primary" plain>メインボタン</LhButton>
  <LhButton type="success" plain>成功ボタン</LhButton>
</template>

円形ボタン

vue

<script setup lang="ts">
</script>

<template>
  <LhButton circle>円</LhButton>
  <LhButton type="primary" circle>主</LhButton>
  <LhButton type="success" circle>成</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton circle>円</LhButton>
  <LhButton type="primary" circle>主</LhButton>
  <LhButton type="success" circle>成</LhButton>
</template>

読み込み中

vue

<script setup lang="ts">
import { ref } from 'vue'

const loading1 = ref(false)
</script>

<template>
  <!-- クリックで読み込み -->
  <LhButton :loading="loading1" @click="loading1 = true">クリックで読み込み</LhButton>
  <!-- 読み込み中 -->
  <LhButton type="primary" loading>読み込み中</LhButton>
</template>

vue

<script>
export default {
  data() {
    return { loading1: false }
  },
}
</script>

<template>
  <!-- クリックで読み込み -->
  <LhButton :loading="loading1" @click="loading1 = true">クリックで読み込み</LhButton>
  <!-- 読み込み中 -->
  <LhButton type="primary" loading>読み込み中</LhButton>
</template>

無効状態

vue

<script setup lang="ts">
</script>

<template>
  <LhButton disabled>無効ボタン</LhButton>
  <LhButton type="primary" disabled>メインボタン</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton disabled>無効ボタン</LhButton>
  <LhButton type="primary" disabled>メインボタン</LhButton>
</template>

Block ボタン

vue

<script setup lang="ts">
</script>

<template>
  <!-- ブロックボタン -->
  <LhButton block>ブロックボタン</LhButton>
  <!-- メインブロック -->
  <LhButton type="primary" block>メインブロック</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- ブロックボタン -->
  <LhButton block>ブロックボタン</LhButton>
  <!-- メインブロック -->
  <LhButton type="primary" block>メインブロック</LhButton>
</template>

角丸ボタン

round は大きな角丸のカプセル形状を提供します（完全な円になる circle とは異なります）。

vue

<script setup lang="ts">
</script>

<template>
  <LhButton round>角丸ボタン</LhButton>
  <LhButton type="primary" round>角丸メイン</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton round>角丸ボタン</LhButton>
  <LhButton type="primary" round>角丸メイン</LhButton>
</template>

アイコンボタン

icon はアイコン名を受け取ります。#icon スロットでカスタムレンダリングも可能です。

vue

<script setup lang="ts">
</script>

<template>
  <!-- 検索 -->
  <LhButton icon="search">検索</LhButton>
  <!-- お気に入り -->
  <LhButton type="primary" icon="star">お気に入り</LhButton>
  <!-- カスタムアイコンスロット -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 検索 -->
  <LhButton icon="search">検索</LhButton>
  <!-- お気に入り -->
  <LhButton type="primary" icon="star">お気に入り</LhButton>
  <!-- カスタムアイコンスロット -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

リンクボタン

href を設定すると <a> タグとしてレンダリングされ、target で開き方を制御します。href 未設定時は native-type がネイティブ button のタイプを決定します。

GitHub

vue

<script setup lang="ts">
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">送信</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">送信</LhButton>
</template>

sx クイックレイアウト

sx プロパティで余白とサイズを素早く設定できます。追加の CSS を書く必要はありません。

vue

<script setup lang="ts">
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">上の余白 2、水平余白 1</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">上の余白 2、水平余白 1</LhButton>
</template>

sx は 8px ベースです。mt: 2 → marginTop: 16px、mx: 1 → marginLeft: 8px; marginRight: 8px。完全なプロパティは sx クイックレイアウトを参照してください。

カスタムテーマ

ボタンにカスタムのテーマカラーを適用します。LhConfigProvider の themeVars プロパティで CSS 変数を上書きします。

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 青花瓷ボタン -->
    <LhButton type="primary">青花瓷ボタン</LhButton>
    <!-- 成功 -->
    <LhButton type="success">成功</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 青花瓷ボタン -->
    <LhButton type="primary">青花瓷ボタン</LhButton>
    <!-- 成功 -->
    <LhButton type="success">成功</LhButton>
  </LhConfigProvider>
</template>

その他のテーマはテーマカスタマイズを参照してください。

国際化

ボタンのテキストは LhConfigProvider と言語パックを組み合わせることで国際化切り替えを実現できます。

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, jaJP, enUS } from '@lh-ui/vue3'

const locale = ref('ja-JP')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, jaJP, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'ja-JP' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Button API

Props

プロパティ名	説明	型	デフォルト値
type	ボタンのタイプ	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "default" \| "primary"`	`LH_BUTTON_TYPE_CONST.default`
size	ボタンのサイズ。未指定時は ConfigProvider から継承します	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	—
loading	読み込み中の状態	`boolean`	`false`
disabled	無効状態	`boolean`	`false`
plain	プレーンボタンにするかどうか	`boolean`	`false`
block	ブロックレベルにするかどうか	`boolean`	`false`
round	角丸ボタンにするかどうか	`boolean`	`false`
circle	円形ボタンにするかどうか	`boolean`	`false`
icon	アイコン名（内蔵の LhIcon アイコン、例: `search`。カスタムレンダリングが必要な場合は `icon` スロットで上書き）	`LhIconName`	—
nativeType	ネイティブ button のタイプ（`href` 未指定時のみ有効）	`"button" \| "submit" \| "reset"`	`'button'`
href	リンクのアドレス（指定すると `<button>` ではなく `<a>` としてレンダリングされます）	`string`	`''`
target	リンクの開き方	`string`	`'_self'`
themeVars	コンポーネントレベルのテーマ変数。ConfigProvider の設定を上書きします	`{ [x: string]: string; }`	—
bgPattern	コンポーネントレベルの背景紋様。ConfigProvider の設定を上書きします	`string`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント名	説明	コールバック
click	クリックイベント	`(event: MouseEvent)`

Slots

スロット名	説明
default	ボタンの内容
icon	カスタムアイコンのレンダリング（`icon` プロパティのデフォルトの `LhIcon` を上書きします）

アクセシビリティ

キーボードフォーカスリング：ルート要素に一貫して :focus-visible フォーカスリングを提供します（キーボードナビゲーション時に表示、マウスクリック時は非表示）。--lh-primary-color テーマ変数で着色され、ダークモードに自動的に追従します。追加設定は不要です
アイコンボタンの命名：ボタンがアイコンのみでテキストがない場合（円形アイコンボタンなど）、スクリーンリーダーは用途を把握できないため、必ず aria-label を渡してください。この属性は自動的にルート要素へパススルーされます。icon プロパティに内蔵アイコン名を直接渡す場合（例: icon="search"）、アイコン以外のカスタムレンダリングが必要な場合は icon スロットを使用します：
vue
```
<LhButton circle aria-label="検索">
  <template #icon>
    <LhIcon name="search" />
  </template>
</LhButton>
```
アニメーションのダウングレード：読み込み中のアニメーションはシステムの prefers-reduced-motion 設定を尊重します（動きを抑える設定では回転を停止します）

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/button/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhButtonProps

export interface LhButtonProps {
  type?: LhButtonType
  /** サイズ（省略可）。指定しない場合は ConfigProvider から継承します */
  size?: LhButtonSize
  loading?: boolean
  disabled?: boolean
  plain?: boolean
  block?: boolean
  round?: boolean
  circle?: boolean
  /** アイコン名（内蔵の LhIcon アイコン、例: `search`。カスタムレンダリングが必要な場合は `icon` スロットで上書き） */
  icon?: LhIconName
  nativeType?: 'button' | 'submit' | 'reset'
  href?: string
  target?: string
  /** コンポーネントレベルのテーマ変数。ConfigProvider のグローバル themeVars と componentTheme を上書きします */
  themeVars?: Record<string, string>
  /** コンポーネントレベルの背景紋様。ConfigProvider の設定を上書きします（patternComponents ホワイトリストの制限を受けません） */
  bgPattern?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhButtonType

export type LhButtonType = (typeof LH_BUTTON_TYPE_CONST)[keyof typeof LH_BUTTON_TYPE_CONST]

LhButtonSize

export type LhButtonSize = (typeof LH_BUTTON_SIZE_CONST)[keyof typeof LH_BUTTON_SIZE_CONST]

LhIconName _{（@lh-ui/share/core/icon (svgs.ts) より）}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Button ボタン ​

基本的な使い方 ​

サイズ ​

プレーンボタン ​

円形ボタン ​

読み込み中 ​

無効状態 ​

Block ボタン ​

角丸ボタン ​

アイコンボタン ​

リンクボタン ​

sx クイックレイアウト ​

カスタムテーマ ​

国際化 ​

Button API ​

Props ​

Events ​

Slots ​

アクセシビリティ ​

型定義 ​