ContainedButton

<ContainedButton kind="primary" size="md" onClick={() => alert('버튼 클릭')} > 버튼 </ContainedButton>

<ContainedButton
  kind="primary"
  size="md"
  onClick={() => alert('버튼 클릭')}
>
  버튼
</ContainedButton>

Loading...

How to use

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

Properties

Prop	Type	Default	Description
kind	primary | secondary | tertiary		버튼의 종류
size	xl | lg | md | sm		버튼의 크기
type	button | submit		button 요소의 타입
IconComponent	IconComponent<IconProps, Fill \| Regular>		버튼 좌측에 표시되는 아이콘
disclosure	boolean		버튼 우측에 표시되는 토글 아이콘 표시 여부
disabled	boolean		버튼의 비활성화 여부
loading	boolean		스피너 표시 여부
onClick	() => void		버튼이 클릭됐을 때 호출되는 콜백 함수
href	string		버튼이 클릭됐을 때 이동할 URL

Usage

종류

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

<HStack spacing={12}> <ContainedButton kind="primary" size="md"> primary </ContainedButton> <ContainedButton kind="secondary" size="md"> secondary </ContainedButton> <ContainedButton kind="tertiary" size="md"> tertiary </ContainedButton> </HStack>

<HStack spacing={12}>
  <ContainedButton kind="primary" size="md">
    primary
  </ContainedButton>
  <ContainedButton kind="secondary" size="md">
    secondary
  </ContainedButton>
  <ContainedButton kind="tertiary" size="md">
    tertiary
  </ContainedButton>
</HStack>

Loading...

크기

<VStack spacing={12} alignHorizontal="center"> <ContainedButton kind="primary" size="sm"> 버튼 </ContainedButton> <ContainedButton kind="primary" size="md"> 버튼 </ContainedButton> <ContainedButton kind="primary" size="lg"> 버튼 </ContainedButton> <ContainedButton kind="primary" size="xl"> 버튼 </ContainedButton> </VStack>

<VStack spacing={12} alignHorizontal="center">
  <ContainedButton kind="primary" size="sm">
    버튼
  </ContainedButton>
  <ContainedButton kind="primary" size="md">
    버튼
  </ContainedButton>
  <ContainedButton kind="primary" size="lg">
    버튼
  </ContainedButton>
  <ContainedButton kind="primary" size="xl">
    버튼
  </ContainedButton>
</VStack>

Loading...

아이콘

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

<HStack spacing={12}> <ContainedButton kind="secondary" size="md" IconComponent={Icon.Heart.Regular} > 좋아요 </ContainedButton> <ContainedButton kind="secondary" size="md" IconComponent={Icon.Menu.Regular} disclosure={true} > 메뉴 </ContainedButton> <ContainedButton kind="secondary" size="md" IconComponent={Icon.Menu.Regular} active={true} disclosure={true} > 메뉴 </ContainedButton> </HStack>

<HStack spacing={12}>
  <ContainedButton
    kind="secondary"
    size="md"
    IconComponent={Icon.Heart.Regular}
  >
    좋아요
  </ContainedButton>
  <ContainedButton
    kind="secondary"
    size="md"
    IconComponent={Icon.Menu.Regular}
    disclosure={true}
  >
    메뉴
  </ContainedButton>
  <ContainedButton
    kind="secondary"
    size="md"
    IconComponent={Icon.Menu.Regular}
    active={true}
    disclosure={true}
  >
    메뉴
  </ContainedButton>
</HStack>

Loading...

로딩

<HStack spacing={12}> <ContainedButton kind="tertiary" size="md" loading={true}> 로딩 </ContainedButton> <ContainedButton kind="tertiary" size="md" IconComponent={Icon.Menu.Regular} loading={true} > 로딩 </ContainedButton> <ContainedButton kind="tertiary" size="md" IconComponent={Icon.Menu.Regular} disclosure={true} loading={true} > 로딩 </ContainedButton> </HStack>

<HStack spacing={12}>
  <ContainedButton kind="tertiary" size="md" loading={true}>
    로딩
  </ContainedButton>
  <ContainedButton
    kind="tertiary"
    size="md"
    IconComponent={Icon.Menu.Regular}
    loading={true}
  >
    로딩
  </ContainedButton>
  <ContainedButton
    kind="tertiary"
    size="md"
    IconComponent={Icon.Menu.Regular}
    disclosure={true}
    loading={true}
  >
    로딩
  </ContainedButton>
</HStack>

Loading...

링크

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

<ContainedButton kind="secondary" size="md" href="/"> 링크 </ContainedButton>

<ContainedButton kind="secondary" size="md" href="/">
  링크
</ContainedButton>

Loading...