Skip to Content
ComponentsIcignalBasicButton

Button

사용자 액션을 트리거하는 버튼 컴포넌트입니다.

개요

Button은 가장 기본적인 인터랙티브 요소로, 클릭 이벤트를 처리하고 사용자 액션을 실행합니다. iCignal Button은 iCignal 브랜드 컬러(Blue, Green, Orange)가 적용되어 있으며, Foundation Button의 모든 기능을 상속합니다.

주요 특징:

  • 6가지 Variant (primary, secondary, outline, ghost, link, destructive)
  • 3가지 Size (sm, md, lg)
  • iCignal 브랜드 컬러 적용 (Blue #2196f3)
  • Loading 상태 지원
  • Icon 지원
  • 완벽한 접근성 (WCAG 2.1 AA)

사용 사례:

  • iCignal Analytics 액션 버튼
  • 데이터 분석 시작 버튼
  • 리포트 생성/다운로드 버튼
  • 대시보드 네비게이션 버튼

설치

npx @vortex/cli add button --package icignal

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Button } from "@vortex/ui-icignal";
 
export default function Example() {
  return <Button>Click me</Button>;
}

Variants (변형)

Primary

기본 액션에 사용하는 iCignal Blue 버튼입니다.

<Button variant="primary">iCignal Blue Button</Button>

Secondary

보조 액션에 사용하는 덜 강조된 버튼입니다.

<Button variant="secondary">Secondary Button</Button>

Outline

아웃라인 스타일의 버튼입니다.

<Button variant="outline">Outline Button</Button>

Ghost

배경 없이 텍스트만 표시되는 버튼입니다.

<Button variant="ghost">Ghost Button</Button>

링크 스타일의 버튼입니다.

<Button variant="link">Link Button</Button>

Destructive

삭제와 같은 위험한 액션에 사용하는 버튼입니다.

<Button variant="destructive">Delete</Button>

Sizes (크기)

Small

<Button size="sm">Small Button</Button>

Medium (기본)

<Button size="md">Medium Button</Button>

Large

<Button size="lg">Large Button</Button>

States (상태)

Disabled

<Button disabled>Disabled Button</Button>

Loading

<Button loading>Loading...</Button>

Icon 사용

Icon + Text

import { BarChart, Download } from 'lucide-react'
 
<Button>
  <BarChart size={16} className="mr-xs" />
  데이터 분석
</Button>
 
<Button variant="secondary">
  <Download size={16} className="mr-xs" />
  리포트 다운로드
</Button>

Icon Only

import { RefreshCw } from "lucide-react";
 
<Button size="sm" aria-label="데이터 새로고침">
  <RefreshCw size={16} />
</Button>;

iCignal 브랜딩

브랜드 컬러

iCignal Button은 다음 브랜드 컬러를 사용합니다:

  • Primary (Blue): #2196f3 - 주요 액션, CTA 버튼
  • Success (Green): #4caf50 - 성공, 확인 액션
  • Warning (Orange): #ff9800 - 경고, 주의 액션

iCignal 특화 사용 가이드

데이터 분석 액션:

// 주요 분석 시작 - Primary (iCignal Blue)
<Button variant="primary">분석 시작</Button>
 
// 데이터 저장/확인 - Success (Green)
<Button variant="success">데이터 저장</Button>
 
// 주의 필요한 작업 - Warning (Orange)
<Button variant="warning">고급 설정</Button>

리포트 생성 워크플로우:

<div className="flex gap-md">
  <Button variant="outline">취소</Button>
  <Button variant="primary">리포트 생성</Button>
</div>

대시보드 액션 버튼:

import { Play, Settings, Download } from "lucide-react";
 
<div className="flex gap-sm">
  <Button variant="primary">
    <Play size={16} className="mr-xs" />
    실시간 모니터링 시작
  </Button>
  <Button variant="outline">
    <Settings size={16} className="mr-xs" />
    설정
  </Button>
  <Button variant="ghost">
    <Download size={16} className="mr-xs" />
    내보내기
  </Button>
</div>;

Foundation과의 차이점

속성FoundationiCignal
Primary Color#3B82F6 (중립 블루)#2196f3 (iCignal 블루)
브랜드 적용없음iCignal 로고 사용 가능
사용 맥락범용iCignal 제품 특화 (Analytics, Reports)
커스터마이징자유롭게 가능브랜드 가이드 준수 필요
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

import 경로 차이:

// Foundation
import { Button } from "@vortex/ui-foundation";
 
// iCignal
import "@vortex/ui-icignal/theme"; // 테마 import 필수
import { Button } from "@vortex/ui-icignal";

Props API

PropTypeDefaultDescription
variant’primary’ | ‘secondary’ | ‘outline’ | ‘ghost’ | ‘link’ | ‘destructive''primary’버튼 변형
size’sm’ | ‘md’ | ‘lg''md’버튼 크기
disabledbooleanfalse비활성화 상태
loadingbooleanfalse로딩 상태
onClick() => void-클릭 이벤트 핸들러
type’button’ | ‘submit’ | ‘reset''button’버튼 타입
classNamestring-추가 CSS 클래스
childrenReactNode-버튼 내용

접근성

Button 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

  • role="button" (자동 적용)
  • aria-disabled="true" (disabled 상태일 때)
  • aria-label (Icon Only 버튼에 필수)

키보드 네비게이션:

  • Enter / Space: 버튼 클릭
  • Tab: 다음 요소로 포커스 이동
  • Shift + Tab: 이전 요소로 포커스 이동

스크린 리더 지원:

  • 버튼 텍스트가 명확하게 읽힘
  • Loading 상태 안내
  • Disabled 상태 안내

색상 대비 (iCignal 브랜드 컬러 기준):

  • Primary (iCignal Blue): 4.5:1 이상
  • Secondary: 4.5:1 이상
  • Outline: 3:1 이상
  • Destructive: 4.5:1 이상

예제

예제 1: iCignal 대시보드 분석 시작

import "@vortex/ui-icignal/theme";
import { Button } from "@vortex/ui-icignal";
import { BarChart, Settings } from "lucide-react";
 
export default function AnalyticsDashboard() {
  const [analyzing, setAnalyzing] = useState(false);
 
  const handleStartAnalysis = async () => {
    setAnalyzing(true);
    await startAnalysis();
    setAnalyzing(false);
  };
 
  return (
    <div className="flex gap-md">
      <Button
        variant="primary"
        size="lg"
        loading={analyzing}
        onClick={handleStartAnalysis}
      >
        <BarChart size={20} className="mr-sm" />
        {analyzing ? "분석 중..." : "데이터 분석 시작"}
      </Button>
      <Button variant="outline" size="lg">
        <Settings size={20} className="mr-sm" />
        분석 설정
      </Button>
    </div>
  );
}

예제 2: iCignal 리포트 생성 워크플로우

import "@vortex/ui-icignal/theme";
import { Button } from "@vortex/ui-icignal";
import { FileText, Download, Share2 } from "lucide-react";
 
export default function ReportActions() {
  return (
    <Card>
      <CardHeader>
        <h3>월간 분석 리포트</h3>
      </CardHeader>
      <CardContent>
        <p>2024년 1월 데이터 분석 결과</p>
      </CardContent>
      <CardFooter className="flex gap-sm justify-end">
        <Button variant="ghost" size="sm">
          <Share2 size={16} className="mr-xs" />
          공유
        </Button>
        <Button variant="outline" size="sm">
          <Download size={16} className="mr-xs" />
          다운로드
        </Button>
        <Button variant="primary" size="sm">
          <FileText size={16} className="mr-xs" />
          리포트 생성
        </Button>
      </CardFooter>
    </Card>
  );
}

예제 3: iCignal 데이터 삭제 확인

import "@vortex/ui-icignal/theme";
import { Button } from "@vortex/ui-icignal";
import { Trash2, AlertTriangle } from "lucide-react";
 
export default function DeleteDataConfirmation() {
  const [loading, setLoading] = useState(false);
 
  const handleDelete = async () => {
    setLoading(true);
    await deleteAnalyticsData();
    setLoading(false);
  };
 
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <AlertTriangle size={24} className="text-warning" />
          <h3>데이터 삭제 확인</h3>
        </DialogHeader>
        <p>
          선택한 분석 데이터를 영구적으로 삭제하시겠습니까? 이 작업은 되돌릴 수
          없습니다.
        </p>
        <DialogFooter className="flex gap-md">
          <Button variant="outline">취소</Button>
          <Button
            variant="destructive"
            loading={loading}
            onClick={handleDelete}
          >
            <Trash2 size={16} className="mr-xs" />
            {loading ? "삭제 중..." : "영구 삭제"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

관련 컴포넌트

Last updated on
BadgeDivider