OutlinedButton

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

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

Loading...

How to use

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

Properties

Prop	Type	Default	Description
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

크기

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

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

Loading...

아이콘

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

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

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

Loading...

로딩

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

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

Loading...

링크

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

<OutlinedButton size="md" href="/"> 링크 </OutlinedButton>

<OutlinedButton size="md" href="/">
  링크
</OutlinedButton>

Loading...