The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.


제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

Text buttons have no box shadow and no background. Only on hover is the container for the button shown.

Raised 버튼은 클릭할때 박스의 그림자가 커집니다. 버튼의 기본 스타일입니다.

Depressed 버튼은 여전히 배경색을 관리하지만 박스 그림자가 없습니다.

Button dropdowns are regular selects with additional styling.

아이콘은 버튼의 주요 컨텐츠로 사용될 수 있습니다.

Floating buttons are rounded and usually contain an icon.

여러 시나리오에 따른 다양한 크기 옵션이 있습니다.

Outlined buttons inherit their borders from the current color applied.

둥근 버튼(Rounded buttons)은 일반적인 버튼과 같습니다. 모서리가 둥글다는 것만 빼면요!

타일 버튼(Tile buttons)도 역시 일반적인 버튼과 같습니다. 모서리에 각이 져있을 뿐이에요!

블럭 버튼은 너비가 가능한 최대값으로 확장됩니다.

loading prop을 사용해서 사용자에게 어떤 것이 진행되고 있다는 것을 알릴 수 있습니다. 기본적으로는 v-progress-circular가 사용되지만 커스터마이즈 할 수 있습니다.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!