ApprovalCard

Action

승인·거부 버튼과 결과 라벨을 보여주는 카드.

Usage

런타임 연결 없이 승인/거부 버튼과 결과 라벨만 prop으로 보여줄 때 사용한다.

import

import { ApprovalCard } from '@mildang/design-system/unofficial/Chat';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ApprovalCard Props

Prop

Type

Default

actions

readonly ApprovalCardAction[]

[ | { id: 'deny', label: '거부' }, | { id: 'allow', label: '허용', primary: true }, | ]

className

string

지정 안 함

description

ReactNode

지정 안 함

detail

ReactNode

지정 안 함

icon

ReactNode

지정 안 함

onAction

(actionId: string) => void

지정 안 함

state

request

statusLabel

ReactNode

지정 안 함

title

ReactNode

도구 실행을 승인할까요?

같은 패밀리

@mildang/design-system/unofficial/Chat 에서 같이 내보내는 컴포넌트다.

ActionBar

메시지에 붙는 복사·재생성·피드백 액션 모음.

ToolApprovalCard

도구 승인·interrupt 요청에 연결하는 카드.

예제

1층 단독 사용 + 문구 교체

런타임 없이 prop만으로 쓰는 사용법이다.

코드

Open in Playground

import { ApprovalCard } from '@mildang/design-system/unofficial/Chat';
import { css } from '@mildang/styled-system/css';

const wrapper = css({ padding: '16', maxWidth: '400px' });

const ApprovalCardPresentationalCustomLabelsExample = () => (
    <div className={wrapper}>
      <ApprovalCard
        title="결제 정보를 조회할까요?"
        description="billing.lookupInvoice"
        detail="invoiceId: INV-2024-0912"
        actions={[
          { id: 'later', label: '나중에' },
          { id: 'ok', label: '조회', primary: true },
        ]}
      />
    </div>
  );

export default ApprovalCardPresentationalCustomLabelsExample;