AXIS
Agentic UI/FeedbackButtons

FeedbackButtons

AI 응답에 대한 좋아요/싫어요 피드백을 제공하는 버튼 컴포넌트입니다.

Installation

bash
npx axis-cli add feedback-buttons --agentic

Usage

tsx
import { FeedbackButtons } from '@axis-ds/agentic-ui'

export function Example() {
  const handleFeedback = (messageId: string, feedback: FeedbackType) => {
    console.log(`Message ${messageId}: ${feedback}`)
  }

  return (
    <FeedbackButtons
      messageId="msg-1"
      onFeedback={handleFeedback}
    />
  )
}

Interactive Demo

버튼을 클릭하여 피드백을 토글할 수 있습니다.

Sizes

Small (기본)

Medium

Initial States

None

Liked

Disliked

Props

messageIdRequired
Type:string

메시지 고유 식별자

initialFeedback
Type:"like" | "dislike" | "none"
Default:"none"

초기 피드백 상태

onFeedback
Type:(messageId: string, feedback: FeedbackType) => void
Default:-

피드백 변경 콜백

size
Type:"sm" | "md"
Default:"sm"

버튼 크기

className
Type:string
Default:-

추가 CSS 클래스

Accessibility

버튼 그룹은 role="group"으로 묶이고, 각 버튼은 aria-label과 aria-pressed(선택 상태)를 가집니다.

KeyAction
Tab피드백 버튼 사이를 이동합니다.
Enter / Space피드백을 선택합니다.
  • 좋아요/싫어요 버튼에 접근 가능한 이름(aria-label)이 제공됩니다.
  • 선택 상태가 aria-pressed로 전달됩니다.