Button 버튼

버튼 컴포넌트로, 다양한 타입, 크기, 상태와 국풍 테마 색상을 지원합니다.

기본 사용법

vue

<script setup lang="ts">
</script>

<template>
  <!-- 기본 -->
  <LhButton>기본 버튼</LhButton>
  <!-- primary -->
  <LhButton type="primary">주요 버튼</LhButton>
  <!-- success -->
  <LhButton type="success">성공 버튼</LhButton>
  <!-- warning -->
  <LhButton type="warning">경고 버튼</LhButton>
  <!-- danger -->
  <LhButton type="danger">위험 버튼</LhButton>
  <!-- info -->
  <LhButton type="info">정보 버튼</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 기본 -->
  <LhButton>기본 버튼</LhButton>
  <!-- primary -->
  <LhButton type="primary">주요 버튼</LhButton>
  <!-- success -->
  <LhButton type="success">성공 버튼</LhButton>
  <!-- warning -->
  <LhButton type="warning">경고 버튼</LhButton>
  <!-- danger -->
  <LhButton type="danger">위험 버튼</LhButton>
  <!-- info -->
  <LhButton type="info">정보 버튼</LhButton>
</template>

다양한 크기

vue

<script setup lang="ts">
</script>

<template>
  <LhButton size="large">대형 버튼</LhButton>
  <LhButton>기본 버튼</LhButton>
  <LhButton size="small">소형 버튼</LhButton>
  <LhButton size="mini">미니 버튼</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton size="large">대형 버튼</LhButton>
  <LhButton>기본 버튼</LhButton>
  <LhButton size="small">소형 버튼</LhButton>
  <LhButton size="mini">미니 버튼</LhButton>
</template>

플레인 버튼

vue

<script setup lang="ts">
</script>

<template>
  <LhButton plain>플레인 버튼</LhButton>
  <LhButton type="primary" plain>주요 버튼</LhButton>
  <LhButton type="success" plain>성공 버튼</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton plain>플레인 버튼</LhButton>
  <LhButton type="primary" plain>주요 버튼</LhButton>
  <LhButton type="success" plain>성공 버튼</LhButton>
</template>

원형 버튼

vue

<script setup lang="ts">
</script>

<template>
  <LhButton circle>원</LhButton>
  <LhButton type="primary" circle>주</LhButton>
  <LhButton type="success" circle>성</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton circle>원</LhButton>
  <LhButton type="primary" circle>주</LhButton>
  <LhButton type="success" circle>성</LhButton>
</template>

로딩 상태

vue

<script setup lang="ts">
import { ref } from 'vue'

const loading1 = ref(false)
</script>

<template>
  <!-- 클릭하여 로딩 -->
  <LhButton :loading="loading1" @click="loading1 = true">클릭하여 로딩</LhButton>
  <!-- 로딩 중 -->
  <LhButton type="primary" loading>로딩 중</LhButton>
</template>

vue

<script>
export default {
  data() {
    return { loading1: false }
  },
}
</script>

<template>
  <!-- 클릭하여 로딩 -->
  <LhButton :loading="loading1" @click="loading1 = true">클릭하여 로딩</LhButton>
  <!-- 로딩 중 -->
  <LhButton type="primary" loading>로딩 중</LhButton>
</template>

비활성화 상태

vue

<script setup lang="ts">
</script>

<template>
  <LhButton disabled>비활성화 버튼</LhButton>
  <LhButton type="primary" disabled>주요 버튼</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton disabled>비활성화 버튼</LhButton>
  <LhButton type="primary" disabled>주요 버튼</LhButton>
</template>

Block 버튼

vue

<script setup lang="ts">
</script>

<template>
  <!-- 블록 버튼 -->
  <LhButton block>블록 버튼</LhButton>
  <!-- 주요 블록 -->
  <LhButton type="primary" block>주요 블록</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 블록 버튼 -->
  <LhButton block>블록 버튼</LhButton>
  <!-- 주요 블록 -->
  <LhButton type="primary" block>주요 블록</LhButton>
</template>

라운드 버튼

round는 크게 둥근 캡슐 형태를 제공합니다(완전한 원형인 circle과 다름).

vue

<script setup lang="ts">
</script>

<template>
  <LhButton round>라운드 버튼</LhButton>
  <LhButton type="primary" round>라운드 주요</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton round>라운드 버튼</LhButton>
  <LhButton type="primary" round>라운드 주요</LhButton>
</template>

아이콘 버튼

icon은 아이콘 이름을 받고, #icon 슬롯으로 커스텀 렌더링할 수도 있습니다.

vue

<script setup lang="ts">
</script>

<template>
  <!-- 검색 -->
  <LhButton icon="search">검색</LhButton>
  <!-- 즐겨찾기 -->
  <LhButton type="primary" icon="star">즐겨찾기</LhButton>
  <!-- 커스텀 아이콘 슬롯 -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 검색 -->
  <LhButton icon="search">검색</LhButton>
  <!-- 즐겨찾기 -->
  <LhButton type="primary" icon="star">즐겨찾기</LhButton>
  <!-- 커스텀 아이콘 슬롯 -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

링크 버튼

href를 설정하면 <a> 태그로 렌더링되고, target으로 열기 방식을 제어합니다. href를 설정하지 않았을 때 native-type이 네이티브 button 타입을 결정합니다.

GitHub

vue

<script setup lang="ts">
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">제출</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">제출</LhButton>
</template>

sx 빠른 레이아웃

sx 속성으로 간격과 크기를 빠르게 설정할 수 있으며, 별도의 CSS를 작성할 필요가 없습니다.

vue

<script setup lang="ts">
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">상단 간격 2, 수평 간격 1</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">상단 간격 2, 수평 간격 1</LhButton>
</template>

sx는 8px을 기준으로 합니다: mt: 2 → marginTop: 16px, mx: 1 → marginLeft: 8px; marginRight: 8px. 전체 속성은 sx 빠른 레이아웃을 참고하세요.

커스텀 테마

버튼에 커스텀 테마 색상을 적용하려면 LhConfigProvider의 themeVars 속성으로 CSS 변수를 덮어씁니다.

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 청화백자 버튼 -->
    <LhButton type="primary">청화백자 버튼</LhButton>
    <!-- 성공 -->
    <LhButton type="success">성공</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- 청화백자 버튼 -->
    <LhButton type="primary">청화백자 버튼</LhButton>
    <!-- 성공 -->
    <LhButton type="success">성공</LhButton>
  </LhConfigProvider>
</template>

테마에 대한 자세한 내용은 테마 커스터마이징을 참고하세요.

국제화

버튼 글자는 LhConfigProvider와 언어 팩으로 국제화 전환을 구현할 수 있습니다.

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Button API

Props

속성	설명	타입	기본값
type	버튼 타입	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "default" \| "primary"`	`LH_BUTTON_TYPE_CONST.default`
size	버튼 크기, 전달하지 않으면 ConfigProvider에서 상속	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	—
loading	로딩 상태	`boolean`	`false`
disabled	비활성화 상태	`boolean`	`false`
plain	플레인 버튼 여부	`boolean`	`false`
block	블록 여부	`boolean`	`false`
round	라운드 버튼 여부	`boolean`	`false`
circle	원형 버튼 여부	`boolean`	`false`
icon	아이콘 이름(내장 LhIcon 아이콘, 예: `search`. 커스텀 렌더링이 필요할 때는 icon 슬롯으로 덮어씀)	`LhIconName`	—
nativeType	네이티브 button 타입(`href`를 전달하지 않았을 때만 적용)	`"button" \| "submit" \| "reset"`	`'button'`
href	링크 주소(전달하면 `<button>` 대신 `<a>`로 렌더링)	`string`	`''`
target	링크 열기 방식	`string`	`'_self'`
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀	`{ [x: string]: string; }`	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀	`string`	—
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

Events

이벤트	설명	콜백 매개변수
click	클릭 이벤트	`(event: MouseEvent)`

Slots

슬롯	설명
default	버튼 내용
icon	커스텀 아이콘 렌더링(`icon` 속성의 기본 `LhIcon`을 덮어씀)

접근성

키보드 포커스 링: 루트 요소에 일관되게 :focus-visible 포커스 링을 제공합니다(키보드 내비게이션 시 표시, 마우스 클릭 시 표시하지 않음). --lh-primary-color 테마 변수로 색상을 적용하고 라이트/다크 모드를 자동으로 따르며, 별도 설정이 필요 없습니다
아이콘 버튼 이름 짓기: 버튼이 아이콘만 있고 글자가 없을 때(예: 원형 아이콘 버튼) 스크린 리더가 용도를 알 수 없으므로 반드시 aria-label을 전달해야 하며, 이 속성은 자동으로 루트 요소로 전달됩니다. icon prop에는 내장 아이콘 이름을 직접 전달하고(예: icon="search"), 아이콘 이외의 커스텀 렌더링이 필요할 때는 icon 슬롯을 사용합니다:
vue
```
<LhButton circle aria-label="검색">
  <template #icon>
    <LhIcon name="search" />
  </template>
</LhButton>
```
모션 저하: 로딩 애니메이션은 시스템의 prefers-reduced-motion 설정을 존중합니다(동작 줄이기를 켜면 회전을 멈춥니다)

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/button/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhButtonProps

export interface LhButtonProps {
  type?: LhButtonType
  /** 크기(선택). 전달하지 않으면 ConfigProvider에서 상속 */
  size?: LhButtonSize
  loading?: boolean
  disabled?: boolean
  plain?: boolean
  block?: boolean
  round?: boolean
  circle?: boolean
  /** 아이콘 이름(내장 LhIcon 아이콘, 예: `search`. 커스텀 렌더링이 필요할 때는 icon 슬롯으로 덮어씀) */
  icon?: LhIconName
  nativeType?: 'button' | 'submit' | 'reset'
  href?: string
  target?: string
  /** 컴포넌트 수준 테마 변수, ConfigProvider의 전역 themeVars와 componentTheme를 덮어씀 */
  themeVars?: Record<string, string>
  /** 컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀(patternComponents 화이트리스트 제한을 받지 않음) */
  bgPattern?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhButtonType

export type LhButtonType = (typeof LH_BUTTON_TYPE_CONST)[keyof typeof LH_BUTTON_TYPE_CONST]

LhButtonSize

export type LhButtonSize = (typeof LH_BUTTON_SIZE_CONST)[keyof typeof LH_BUTTON_SIZE_CONST]

LhIconName _{(@lh-ui/share/core/icon (svgs.ts)에서 가져옴)}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Button 버튼 ​

기본 사용법 ​

다양한 크기 ​

플레인 버튼 ​

원형 버튼 ​

로딩 상태 ​

비활성화 상태 ​

Block 버튼 ​

라운드 버튼 ​

아이콘 버튼 ​

링크 버튼 ​

sx 빠른 레이아웃 ​

커스텀 테마 ​

국제화 ​

Button API ​

Props ​

Events ​

Slots ​

접근성 ​

타입 정의 ​