Button

누르는 동작을 담는다.

import { Button, IconButton, ButtonGroup, ButtonLink } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Button } from "@nui-kit/react/button";
import "@nui-kit/react/styles/button.css";   // 온디맨드일 때

기본이 전체 너비다

Button 은 width: 100% 다. 모바일 폼을 전제로 한 기본값이라 아래 예제에서도 한 줄을 모두 차지한다. 너비를 제한하려면 바깥 컨테이너로 감싸거나 ButtonGroup 을 쓴다.

색과 변형

색이 아니라 역할이 이름이다. 화면의 주 행동에는 primary, 그보다 덜 중요한 행동에는 secondary, 되돌릴 수 없는 삭제나 탈퇴에는 danger, 확인이 필요한 진행에는 warning 을 쓴다. 손을 올리면 한 단계, 누르면 두 단계 진해진다.

<Button variant="line" color="danger">삭제</Button>

크기

<Button size="large">라벨</Button>

모양

<Button shape="round" color="primary">라벨</Button>

아이콘

icon prop 으로 라벨 앞에 넣는다.

<Button icon={<DelIcon />}>삭제</Button>

로딩

isLoading 이면 아이콘 자리에 스피너가 돌고 클릭·Enter·폼 제출이 막히며 aria-busy 가 붙는다. 라벨은 그대로 보이고 스크린리더에는 라벨 뒤에 loadingLabel(기본 "처리 중")이 붙는다. 색은 바뀌지 않고 포커스도 남는다 — disabled 가 아니다.

<Button isLoading>저장</Button>

<Button isLoading={isSaving} onClick={save}>저장</Button>

<form onSubmit={submit}>
  <Textfield … />
  <Button type="submit" isLoading={isSaving}>제출</Button>
</form>

비활성

<Button disabled>라벨</Button>

IconButton

아이콘만 담는 정사각 버튼이다. aria-label 을 반드시 준다. 없으면 스크린리더가 읽을 것이 없다. variant 는 solid 와 line 둘뿐이다.

<IconButton aria-label="삭제"><DelIcon /></IconButton>

ButtonGroup

기본은 균등 분할이다. shouldAutoWidth 를 주면 그 항목만 내용 폭이 된다.

ButtonLink

생김새는 Button 과 같다. 누르는 대신 이동한다. next/link 를 쓰는 유일한 컴포넌트라 next 가 optional peer 다. 이 컴포넌트를 쓰지 않으면 설치할 필요가 없다.

<ButtonLink href="/components" color="primary">목록</ButtonLink>

커스터마이징

색은 컴포넌트별로 열지 않는다. 배경과 글자는 짝이라 배경만 바꾸면 대비가 깨지는데 화면에 드러나지 않는다. 버튼 하나의 색을 바꾸려면 className 을, 화면 전체를 바꾸려면 브랜드 프리셋을 쓴다.

치수는 크기 옵션마다 이름이 따로 있다. 하나로 두면 값을 넣는 순간 세 크기가 전부 같아진다.

API

Button

ButtonProps 에서 자동 생성됨 (components/Button/Button.tsx). 표준 DOM 속성 285개는 그대로 전달되며 표에서 생략했다.

IconButton

IconButtonProps 에서 자동 생성됨 (components/Button/IconButton.tsx). 표준 DOM 속성 283개는 그대로 전달되며 표에서 생략했다.

ButtonGroup

ButtonGroupProps 에서 자동 생성됨 (components/Button/ButtonGroup.tsx).

ButtonGroup.Item

ButtonGroupItemProps 에서 자동 생성됨 (components/Button/ButtonGroup.tsx).

ButtonLink

ButtonLinkProps 에서 자동 생성됨 (components/Button/ButtonLink.tsx). 표준 DOM 속성 295개는 그대로 전달되며 표에서 생략했다.