GhostButton

<GhostButton size="md">버튼</GhostButton>

<GhostButton size="md">버튼</GhostButton>

Loading...

How to use

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

Properties

Prop	Type	Default	Description
size	lg | md | sm		버튼의 크기
color	OnColorToken		버튼 텍스트, 아이콘의 색상
type	button | submit		button 요소의 타입
IconComponent	IconComponent<IconProps, Fill \| Regular>		버튼 좌측에 표시되는 아이콘
arrow	top | right | bottom		버튼 우측에 표시되는 화살표 아이콘 사용 여부와 방향
disclosure	boolean		버튼 우측에 표시되는 토글 아이콘 사용 여부
active	boolean		버튼 우측에 표시되는 토글 아이콘 방향 설정
disabled	boolean		버튼의 비활성화 여부
onClick	() => void		버튼이 클릭됐을 때 호출되는 콜백 함수
href	string		버튼이 클릭됐을 때 이동할 URL

Usage

크기

<VStack spacing={12}> <GhostButton size="lg">버튼</GhostButton> <GhostButton size="md">버튼</GhostButton> <GhostButton size="sm">버튼</GhostButton> </VStack>

<VStack spacing={12}>
  <GhostButton size="lg">버튼</GhostButton>
  <GhostButton size="md">버튼</GhostButton>
  <GhostButton size="sm">버튼</GhostButton>
</VStack>

Loading...

아이콘

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

<VStack spacing={12}> <GhostButton size="md" IconComponent={Icon.Heart.Regular}> 좋아요 </GhostButton> <GhostButton size="md" IconComponent={Icon.Menu.Regular} disclosure="right" > 메뉴 </GhostButton> <GhostButton size="md" arrow="top"> 메뉴 </GhostButton> <GhostButton size="md" arrow="bottom"> 메뉴 </GhostButton> <GhostButton size="md" disclosure={true}> 메뉴 </GhostButton> <GhostButton size="md" disclosure={true} active={true}> 메뉴 </GhostButton> </VStack>

<VStack spacing={12}>
  <GhostButton size="md" IconComponent={Icon.Heart.Regular}>
    좋아요
  </GhostButton>
  <GhostButton
    size="md"
    IconComponent={Icon.Menu.Regular}
    disclosure="right"
  >
    메뉴
  </GhostButton>
  <GhostButton size="md" arrow="top">
    메뉴
  </GhostButton>
  <GhostButton size="md" arrow="bottom">
    메뉴
  </GhostButton>
  <GhostButton size="md" disclosure={true}>
    메뉴
  </GhostButton>
  <GhostButton size="md" disclosure={true} active={true}>
    메뉴
  </GhostButton>
</VStack>

Loading...

링크

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

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

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

Loading...