Button ボタン

よく使われる操作ボタン。複数のタイプ、サイズ、状態、中華風テーマカラーをサポートします。

基本的な使い方

基本的な使い方

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton>デフォルトボタン</LhButton>
      <LhButton type="primary">プライマリボタン</LhButton>
      <LhButton type="success">成功ボタン</LhButton>
      <LhButton type="warning">警告ボタン</LhButton>
      <LhButton type="danger">危険ボタン</LhButton>
      <LhButton type="info">情報ボタン</LhButton>
    </>
  )
}

サイズと状態

サイズと状態

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton size="large">大型ボタン</LhButton>
      <LhButton>デフォルトボタン</LhButton>
      <LhButton size="small">小型ボタン</LhButton>

      <LhButton type="primary" loading>読み込み中</LhButton>
      <LhButton type="primary" disabled>無効状態</LhButton>
      <LhButton type="primary" icon="search">アイコンボタン</LhButton>
      <LhButton type="primary" round>角丸ボタン</LhButton>
      <LhButton type="primary" plain>アウトラインボタン</LhButton>
    </>
  )
}

Button Props

プロパティ	説明	型	使用可能な値	デフォルト値
type	ボタンタイプ	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	サイズ	'large' | 'middle' | 'small'	—	ConfigProvider に準拠
loading	読み込み中状態	boolean	—	false
disabled	無効状態	boolean	—	false
plain	アウトライン形態	boolean	—	false
block	全幅（幅 100%）	boolean	—	false
round	角丸	boolean	—	false
circle	円形	boolean	—	false
icon	アイコン名	LhIconName	—	—
nativeType	ネイティブ type 属性	'button' | 'submit' | 'reset'	—	'button'
href	指定時は <a> として描画	string	—	—
target	href モードの target	string	—	—
themeVars	コンポーネントレベルのテーマ変数	Record<string, string>	—	—
bgPattern	コンポーネントレベルの背景紋様	string	—	—
sx	クイックレイアウトプロパティ	SxProps	—	—

Button イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onClick	クリック時に発火（disabled / loading 時は発火しない）	(event: MouseEvent) => void	@click

スタイル

import '@lh-ui/react/style/button'