Button

shadcn/ui를 기반으로 한 간단하고 확장 가능한 버튼 컴포넌트입니다. 형광빛이 도는 컬러와 깔끔한 디자인을 제공합니다.

설치

pnpm dlx shadcn@latest add https://n-exit.io/r/button.json

또는 로컬에서 직접 복사:

# 1. Button 컴포넌트 파일 복사
cp nexit-ui/components/ui/button.tsx components/ui/button.tsx

# 2. 필요한 의존성 설치
pnpm add @radix-ui/react-slot class-variance-authority framer-motion

기능

형광빛 컬러: Green, Orange, Purple, Red, Default 컬러
네 가지 스타일: Solid, Outline, Ghost, Link
로딩 상태: 내장된 로딩 스피너
아이콘 지원: 좌측/우측 아이콘 지원
접근성: 키보드 내비게이션 및 스크린 리더 지원

기본 사용법

import { Button } from '@/nexit-ui/components/ui/button'

export function BasicButton() {
  return <Button>클릭하세요</Button>
}

변형

기본 변형 (Solid)

<Button variant="solid" color="default">Default</Button>
<Button variant="solid" color="green">Green</Button>
<Button variant="solid" color="orange">Orange</Button>
<Button variant="solid" color="purple">Purple</Button>
<Button variant="solid" color="red">Red</Button>

아웃라인 변형

<Button variant="outline" color="default">Outline</Button>
<Button variant="outline" color="green">Green</Button>
<Button variant="outline" color="orange">Orange</Button>
<Button variant="outline" color="purple">Purple</Button>
<Button variant="outline" color="red">Red</Button>

고스트 변형

<Button variant="ghost" color="default">Ghost</Button>
<Button variant="ghost" color="green">Green</Button>
<Button variant="ghost" color="orange">Orange</Button>
<Button variant="ghost" color="purple">Purple</Button>
<Button variant="ghost" color="red">Red</Button>

링크 변형

<Button variant="link" color="default">Link</Button>
<Button variant="link" color="green">Green</Button>
<Button variant="link" color="orange">Orange</Button>
<Button variant="link" color="purple">Purple</Button>
<Button variant="link" color="red">Red</Button>

크기

<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="default">Default</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>

아이콘과 함께 사용

<Button leftIcon={<PlusIcon className="h-4 w-4" />}>Add</Button>
<Button rightIcon={<ArrowRightIcon className="h-4 w-4" />}>Continue</Button>
<Button size="icon">
  <PlusIcon className="h-4 w-4" />
</Button>

로딩 상태

<Button loading>Loading...</Button>
<Button loading variant="solid" color="green">
  Saving...
</Button>

비활성화 상태

<Button disabled>Disabled</Button>
<Button disabled variant="solid" color="green">
  Disabled
</Button>

API

Props

속성	타입	기본값	설명
`variant`	`string`	`"solid"`	버튼 스타일 변형
`color`	`string`	`"default"`	버튼 컬러
`size`	`string`	`"default"`	버튼 크기
`loading`	`boolean`	`false`	로딩 상태 표시
`leftIcon`	`ReactNode`	-	좌측 아이콘
`rightIcon`	`ReactNode`	-	우측 아이콘
`disabled`	`boolean`	`false`	버튼 비활성화
`asChild`	`boolean`	`false`	자식 요소로 렌더링

변형 옵션

solid - 기본 채워진 버튼
outline - 테두리만 있는 투명 버튼
ghost - 배경 없는 텍스트 버튼
link - 링크 스타일 버튼

컬러 옵션

default - 기본 검정/흰색
green - 형광 초록
orange - 형광 주황
purple - 형광 보라
red - 형광 빨강

크기 옵션

xs - 초소형 (28px)
sm - 소형 (32px)
default - 기본 (40px)
lg - 대형 (48px)
xl - 초대형 (56px)
icon - 아이콘 전용 정사각형 버튼

사용 예시

import { Button } from "@/nexit-ui/components/ui/button";

export function Example() {
  return (
    <div className="flex gap-2">
      <Button variant="outline" color="default">Cancel</Button>
      <Button variant="solid" color="green">Confirm</Button>
    </div>
  );
}

깔끔하고 간단한 디자인으로 다양한 프로젝트에서 활용할 수 있는 버튼 컴포넌트입니다.

Button

On this page