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> 덮어쓰기)