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'