Actions

Button

사용자의 액션을 트리거하는 가장 기본 요소.

텍스트와 (선택적으로) 아이콘으로 구성되며, 시각적 강도에 따라 6가지 variant를 제공합니다. asChild로 Radix Slot 패턴을 지원해 <Link> 등 다른 컴포넌트로 자연스럽게 변환할 수 있습니다.

언제 쓰는가 — 폼 제출, 확인/취소, 페이지 이동, 다이얼로그 트리거 등. 동일 영역에 여러 버튼이 있다면 가장 중요한 액션 1개만 primary로, 나머지는 secondary 또는 ghost로 위계를 잡습니다.

import { Button } from "@nxtgen-org/react";

Variants

시각적 강도에 따라 6가지. primary는 페이지당 1개를 권장.

가장 중요한 액션. 페이지당 1개.

tsx

1<Button>저장</Button>

primary 옆 보조 액션.

tsx

1<Button variant="secondary">취소</Button>

배경 없음. 도구 모음·메뉴 항목 등 시각 소음을 줄여야 할 때.

tsx

1<Button variant="ghost">더보기</Button>

파괴적 액션 (삭제·계정 해지 등). Dialog와 함께 확인 단계 권장.

tsx

1<Button variant="danger">삭제</Button>

브랜드 시그니처 그라디언트 + glow. AI/프리미엄 강조 CTA.

tsx

1<Button variant="gradient" leftIcon={<Sparkles size={16} />}>
2  AI에게 묻기
3</Button>

텍스트 링크처럼 보이지만 접근성 측면에서 액션이 명확.

tsx

1<Button variant="link">자세히 보기</Button>

3가지. 같은 영역에서 여러 사이즈 혼용은 지양.

tsx

1<Button size="sm">Small</Button>
2<Button size="md">Medium</Button>
3<Button size="lg">Large</Button>

leftIcon, rightIcon으로 자연스럽게 결합. 아이콘 사이즈는 버튼 사이즈에 맞춰 14~18px.

tsx

1<Button leftIcon={<Plus size={16} />}>새 만들기</Button>
2<Button rightIcon={<ArrowRight size={16} />} variant="secondary">
3  다음 단계
4</Button>

loading은 disabled를 자동 적용하고 클릭을 막습니다.

tsx

1<Button loading>처리 중</Button>
2<Button disabled>비활성</Button>

block prop으로 컨테이너 가득 채움. 모바일 폼 하단 CTA에 적합.

tsx

1<Button block>가입하기</Button>

asChild로 <a>, Next.js <Link> 등 다른 element로 동작. Radix Slot 패턴.

tsx

1import Link from "next/link";
2
3<Button asChild>
4  <Link href="/dashboard">대시보드로</Link>
5</Button>

Name	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "danger" \| "gradient" \| "link"	"primary"	시각적 강도.
size	"sm" \| "md" \| "lg"	"md"	버튼 높이/패딩.
leftIcon	ReactNode	—	텍스트 좌측 아이콘.
rightIcon	ReactNode	—	텍스트 우측 아이콘.
loading	boolean	false	로딩 상태. disabled 자동 적용.
disabled	boolean	false	비활성. 클릭 불가 + opacity 60%.
block	boolean	false	true면 width 100%.
asChild	boolean	false	Radix Slot 패턴. 자식 요소에 props 전달.
...props	ButtonHTMLAttributes<HTMLButtonElement>	—	표준 button 속성 (onClick, type, form 등) 전달.