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'