IconButton

<IconButton size="md" IconComponent={Icon.Play.Fill} ariaLabel="Play" />

<IconButton
  size="md"
  IconComponent={Icon.Play.Fill}
  ariaLabel="Play"
/>

Loading...

How to use

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

Properties

Prop	Type	Default	Description
size	lg | md | sm		버튼의 크기
color	ColorToken		버튼 텍스트, 아이콘의 색상
type	button | submit		button 요소의 타입
IconComponent	IconComponent<IconProps, Fill \| Regular \| Thin>		버튼에 표시되는 아이콘
disabled	boolean		버튼의 비활성화 여부
onClick	() => void		버튼이 클릭됐을 때 호출되는 콜백 함수
ariaLabel	string		버튼의 접근 가능한 이름
href	string		버튼이 클릭됐을 때 이동할 URL

Usage

크기

<HStack spacing={24} alignVertical="center"> <IconButton size="lg" IconComponent={Icon.Play.Fill} /> <IconButton size="md" IconComponent={Icon.Play.Fill} /> <IconButton size="sm" IconComponent={Icon.Play.Fill} /> </HStack>

<HStack spacing={24} alignVertical="center">
  <IconButton size="lg" IconComponent={Icon.Play.Fill} />
  <IconButton size="md" IconComponent={Icon.Play.Fill} />
  <IconButton size="sm" IconComponent={Icon.Play.Fill} />
</HStack>

Loading...

링크

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

<IconButton size="md" IconComponent={Icon.Play.Fill} href="/" />

<IconButton
  size="md"
  IconComponent={Icon.Play.Fill}
  href="/"
/>

Loading...