Button

Button (버튼)

출처: 문서

본문

Button

흔히 사용되는 버튼이에요.

기본 사용법

type, plain, round, dashed, circle을 사용해서 Button의 스타일을 정의해요.

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}

비활성화 버튼

disabled 속성이 버튼을 비활성화할지 결정해요. disabled 속성을 사용해서 버튼의 비활성화 여부를 결정해요. Boolean 값을 받아요.

.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}

링크 버튼

WARNING type="text"는 더 이상 사용되지 않으며(Deprecated), 3.0.0에서 제거될 예정이에요. 새 API로 전환하는 것을 고려해 주세요. 새 API link는 2.2.1에 추가됐어요. type API를 사용해서 링크 버튼의 테마를 설정할 수 있어요.

const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const

텍스트 버튼

TIP 텍스트 버튼은 2.2.0부터 새 디자인으로 업그레이드됐어요. 이전 버전처럼 버튼을 사용하고 싶다면 Link를 확인해 보세요. API도 업데이트됐는데, type 속성이 버튼의 스타일도 나타내기 때문이에요. 그래서 텍스트 버튼을 위한 새 API text: boolean을 만들었어요.

테두리와 배경이 없는 버튼이에요.

const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const

아이콘 버튼

아이콘을 사용해서 Button에 더 많은 의미를 더해요. icon만 단독으로 사용해서 공간을 아낄 수도 있고, 텍스트와 함께 사용할 수도 있어요. icon 속성을 사용해서 아이콘을 추가해요. 아이콘 목록은 Element Plus icon 컴포넌트에서 찾을 수 있어요. 텍스트 오른쪽에 아이콘을 추가하는 것은 <i> 태그로 가능해요. 커스텀 아이콘도 사용할 수 있어요.

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

버튼 그룹

버튼 그룹으로 표시되며, 일련의 유사한 동작을 그룹화하는 데 사용할 수 있어요. 2.11.9에서는 direction 속성을 사용할 수 있어요. <el-button-group> 태그를 사용해서 버튼을 그룹화해요.

로딩 버튼

버튼을 클릭해서 데이터를 로드하면 버튼이 로딩 상태를 표시해요. loading 속성을 true로 설정해서 로딩 상태를 표시해요.

TIP loading 슬롯이나 loadingIcon을 사용해서 로딩 컴포넌트를 커스터마이즈할 수 있어요. 참고: loading 슬롯이 loadingIcon보다 우선순위가 높아요.

import { Eleme } from '@element-plus/icons-vue'

.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}

크기

기본 크기 외에도 Button 컴포넌트는 다양한 시나리오에서 선택할 수 있는 세 가지 추가 크기를 제공해요. size 속성을 사용해서 large, small 크기를 추가로 설정해요.

import { Search } from '@element-plus/icons-vue'

Tag 2.3.4

요소 태그를 커스터마이즈할 수 있어요. 예를 들어 button, div, a, router-link, nuxt-link가 가능해요.

커스텀 색상 beta

버튼 색상을 커스터마이즈할 수 있어요. hover 색상과 active 색상은 자동으로 계산돼요. color prop은 2.13.7부터 link와 text 버튼에서도 동작해요.

Button API

Button Attributes

Button Slots

Button Exposes

ButtonGroup API

ButtonGroup Attributes

ButtonGroup Slots

더 알아보기 (Learn more)