CommentButton

코멘트 액션용 버튼 컴포넌트

개요

Cals CommentButton은 원본 Vue QSCommentButton 컴포넌트를 React로 재구현한 것으로, 코멘트 관련 액션을 실행하는 버튼입니다. Button보다 간소한 인터페이스를 제공합니다.

주요 특징

• ✅ 버튼 텍스트: title prop으로 텍스트 표시
• ✅ 로딩 상태: loading prop으로 로딩 표시 및 클릭 차단
• ✅ 비활성화: disabled prop으로 버튼 비활성화
• ✅ 커스텀 스타일: backgroundColor, color, fontSize, fontFamily, fontWeight, fontStyle 개별 지정
• ✅ 가시성 제어: visible prop으로 선언적 표시/숨김

Button과의 차이

• FormItem 래핑 없음
• 단축키(shortcut) 없음
• 아이콘(icon) 없음
• ref 노출 없음

기본 사용

import { CommentButton } from "@vortex/ui-cals"
 
<CommentButton title="코멘트" />

비활성화 (disabled)

<CommentButton title="활성" />
<CommentButton title="비활성" disabled />

로딩 상태 (loading)

loading=true이면 로딩 표시가 나타나고 클릭이 차단됩니다.

<CommentButton title="로딩 중" loading />

배경색 (backgroundColor)

배경색을 지정하면 hover/active/disabled 색상이 자동 파생됩니다.

<CommentButton title="기본" />
<CommentButton title="초록" backgroundColor="#22c55e" />
<CommentButton title="빨강" backgroundColor="#ef4444" />

폰트 스타일

<CommentButton title="큰 글씨" fontSize="18px" />
<CommentButton title="굵은 글씨" fontWeight="700" />
<CommentButton title="이탤릭" fontStyle="italic" />
<CommentButton title="모노" fontFamily="monospace" />

가시성 제어 (visible)

<CommentButton title="보이는 버튼" visible={true} />
<CommentButton title="숨겨진 버튼" visible={false} />

API Reference

Props

접근성

• ✅ button role 자동 적용
• ✅ disabled 시 접근성 상태 자동 반영
• ✅ loading 시 클릭 차단