docs/components/chat-ai/ToolApproval

ToolApproval

Approve or reject AI tool calls.

import { ToolApproval } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#Props

PropTypeDefaultDescription
tool *string
input *Record<string, unknown>
onApprove *(alwaysAllow: boolean) => void
onDeny *() => void
classstring

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-bg-primary
  • --sk-bg-secondary
  • --sk-bg-tertiary
  • --sk-border
  • --sk-duration-fast
  • --sk-error
  • --sk-focus-offset
  • --sk-font-mono
  • --sk-font-size-lg
  • --sk-font-size-sm
  • --sk-font-size-xs
  • --sk-font-weight-bold
  • --sk-font-weight-medium
  • --sk-font-weight-semibold
  • --sk-icon-lg
  • --sk-icon-md
  • --sk-icon-xl
  • --sk-leading-tight
  • --sk-radius-lg
  • --sk-radius-sm
  • --sk-shadow-2xl
  • --sk-space-2xl
  • --sk-space-lg
  • --sk-space-md
  • --sk-space-sm
  • --sk-space-xs
  • --sk-success
  • --sk-surface-overlay-bg
  • --sk-text-muted
  • --sk-text-on-accent
  • --sk-text-primary
  • --sk-text-secondary
  • --sk-warning
  • --sk-z-modal
  • --sk-z-popover