Button

버튼 역할을 수행하는 컴포넌트 입니다. to 속성을 부여하면 앵커 태그로도 사용할 수 있습니다.

버튼 색상은 피그마 버튼 컴포넌트의 Hierarchy 속성명을 따릅니다.

API

컴포넌트가 제공하는 API 목록입니다. Vue Props 를 통해 사용할 수 있습니다.

Prop	Type	설명
variant	"default-primary" | "default-secondary-gray" | "default-secondary-color" | "default-tertiary-gray" | "default-tertiary-color" | "default-link-gray" | "default-link-color" | "error-primary" | "error-secondary" | "error-tertiary" | "error-link"	푸른 계열은 default-, 붉은 계열은 error- 를 접두사로 사용합니다.
size	"xs" | "sm" | "md" | "lg" | "xl" | "2xl"	버튼의 크기를 지정합니다.
to	RouteLocationRaw	RouterLink 의 to 속성을 지정합니다. ex) '/path'
disabled	boolean	버튼을 비활성화합니다.
class	string	버튼의 컨테이너 요소에 클래스를 추가합니다.
type	"submit" | "reset" | "button"	HTML Button 타입을 지정합니다.

예제

Size

예시

<div class="flex items-center gap-spacing-md">
  <BaseButton variant="default-primary" size="xs">
    등록하기
  </BaseButton>
  <BaseButton variant="default-primary" size="sm">
    등록하기
  </BaseButton>
  <BaseButton variant="default-primary" size="md">
    등록하기
  </BaseButton>
  <BaseButton variant="default-primary" size="lg">
    등록하기
  </BaseButton>
  <BaseButton variant="default-primary" size="xl">
    등록하기
  </BaseButton>
  <BaseButton variant="default-primary" size="2xl">
    등록하기
  </BaseButton>
</div>

Variant

예시

<div class="flex items-center flex-wrap gap-spacing-md">
  <BaseButton variant="default-primary" size="xs">등록하기</BaseButton>
  <BaseButton variant="default-secondary-gray" size="xs">등록하기</BaseButton>
  <BaseButton variant="default-secondary-color" size="xs">등록하기</BaseButton>
  <BaseButton variant="default-tertiary-gray" size="xs">등록하기</BaseButton>
  <BaseButton variant="default-tertiary-color" size="xs">등록하기</BaseButton>
  <BaseButton variant="error-primary" size="xs">등록하기</BaseButton>
  <BaseButton variant="error-secondary" size="xs">등록하기</BaseButton>
  <BaseButton variant="error-tertiary" size="xs">등록하기</BaseButton>
</div>

<div class="flex items-center flex-wrap gap-spacing-md">
  <BaseButton variant="default-link-gray" size="xs">등록하기</BaseButton>
  <BaseButton variant="default-link-color" size="xs">등록하기</BaseButton>
  <BaseButton variant="error-link" size="xs">등록하기</BaseButton>
</div>