본문으로 건너뛰기

ContainedButton

Loading...

How to use

import { ContainedButton } from '@vibrant-ui/components';

Properties

PropTypeDefaultDescription
kindprimary | secondary | tertiary버튼의 종류
sizexl | lg | md | sm버튼의 크기
typebutton | submit button 요소의 타입
IconComponentIconComponent<IconProps, Fill \| Regular>버튼 좌측에 표시되는 아이콘
disclosureboolean버튼 우측에 표시되는 토글 아이콘 표시 여부
disabledboolean버튼의 비활성화 여부
loadingboolean스피너 표시 여부
onClick() => void버튼이 클릭됐을 때 호출되는 콜백 함수
hrefstring버튼이 클릭됐을 때 이동할 URL

Usage

종류

primary, secondary ,tertiary의 세 가지 타입을 제공합니다.

Loading...

크기

Loading...

아이콘

IconComponent 속성으로 좌측에 표시되는 아이콘을 설정할 수 있습니다. Fill과 Regular 타입의 아이콘만 사용 가능합니다. disclousreactive 속성으로 우측에 표시되는 토글 아이콘의 방향이나 표시 여부를 설정합니다.

Loading...

로딩

Loading...

링크

href 속성으로 버튼이 클릭됐을 때 이동할 URL을 지정할 수 있습니다. href이 지정되면 button 요소가 아닌 a 요소로 렌더링됩니다.

Loading...
이전
Callout