Button ボタン

基本的な操作ボタン。type/size/plain/block/round/circle/loading などのバリエーションが揃っており、<a> リンクとしてのレンダリングもサポートします。

ボタン形状

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhButton>デフォルトボタン</LhButton>
      <LhButton type="primary">メインボタン</LhButton>
      <LhButton type="success">成功</LhButton>
      <LhButton type="warning">警告</LhButton>
      <LhButton type="danger">危険</LhButton>
    </div>
    <div class="demo-row">
      <LhButton type="primary" plain>プレーンボタン</LhButton>
      <LhButton type="primary" round>角丸ボタン</LhButton>
      <LhButton type="primary" circle icon="lh-icon-search" />
      <LhButton type="primary" loading>読み込み中</LhButton>
      <LhButton type="primary" disabled>無効</LhButton>
    </div>
    <div class="demo-row">
      <LhButton size="small">小</LhButton>
      <LhButton size="medium">デフォルトサイズ</LhButton>
      <LhButton size="large">大</LhButton>
      <LhButton type="primary" block style="max-width: 200px">ブロック（block）</LhButton>
    </div>
    <div class="demo-row">
      <LhButton icon="lh-icon-search">アイコンボタン</LhButton>
      <LhButton native-type="submit" type="primary">ネイティブ type=submit</LhButton>
      <LhButton href="https://lh-ui.lhgb.top" target="_blank">リンクボタン（href）</LhButton>
    </div>
  </div>
</template>

Props

プロパティ	説明	型	デフォルト値
type	ボタンタイプ	'default' \| 'primary' など（LH_BUTTON_TYPE_CONST）	'default'
size	サイズ。指定しない場合は ConfigProvider から継承	'small' \| 'medium' \| 'large'	—
loading	読み込み状態（クリック無効 + spinner）	boolean	false
disabled	無効	boolean	false
plain / block / round / circle	形状の修飾	boolean	false
icon	内蔵アイコンのクラス名	string	''
nativeType	ネイティブ type	'button' \| 'submit' \| 'reset'	'button'
href / target	href を渡すと <a> としてレンダリング	string	'' / '_self'
themeVars / bgPattern / sx	テーマの上書き（テーマの章を参照）	—	—

Events

イベント	説明	コールバックパラメータ
click	loading/disabled のときはクリック不可	(e: MouseEvent)

Slots

スロット	説明
default	ボタンのテキスト
icon	アイコンのカスタマイズ（デフォルトの <i> を上書き）