Implementation:TobikoData Sqlmesh ModalConfirmation

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A compound confirmation modal component with semantic subcomponents for structured dialog content.

Description

ModalConfirmation is a specialized modal component built on the base Modal component that implements a compound component pattern for displaying confirmation dialogs. The main component exports several subcomponents (Headline, Tagline, Description, Actions, Main, Details) that can be composed together to build consistent confirmation UIs. The component wraps content in a Dialog.Panel with styling that creates a card-like appearance with rounded corners and shadows. It includes a Confirmation interface that defines the structure for confirmation data (action callbacks, text content, optional details list), and a WithConfirmation interface for components that can trigger confirmations. The Details subcomponent provides a scrollable list view for displaying multiple items with warning styling.

Usage

Use this component when you need to prompt users for confirmation before executing important or destructive actions. Compose the subcomponents to build a consistent confirmation dialog with headline, description, optional details list, and action buttons. The compound pattern ensures consistent styling while allowing flexibility in content structure.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/modal/ModalConfirmation.tsx

Signature

interface PropsModalConfirmation extends React.HTMLAttributes<HTMLElement> {
  show: boolean
  onClose?: () => void
  afterLeave?: () => void
}

export interface Confirmation {
  action?: () => void
  cancel?: () => void
  headline?: string
  description?: string
  details?: string[]
  tagline?: string
  yesText: string
  noText: string
  children?: React.ReactNode
}

export interface WithConfirmation {
  setConfirmation: (confirmation?: Confirmation) => void
}

export default function ModalConfirmation({
  show,
  children,
  onClose,
  afterLeave,
}: PropsModalConfirmation): JSX.Element

Import

import ModalConfirmation from '@components/modal/ModalConfirmation'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls modal visibility
children	React.ReactNode	Yes	Modal content composed from subcomponents
onClose	() => void	No	Callback when modal is dismissed
afterLeave	() => void	No	Callback after exit animation completes

Outputs

Name	Type	Description
JSX.Element	React component	Confirmation modal with structured content areas

Usage Examples

import ModalConfirmation from '@components/modal/ModalConfirmation'
import { Button } from '@components/button/Button'
import { EnumVariant } from '~/types/enum'

function ConfirmationDialog({ show, onClose, onConfirm }) {
  return (
    <ModalConfirmation show={show} onClose={onClose}>
      <ModalConfirmation.Main>
        <ModalConfirmation.Headline>
          Confirm Action
        </ModalConfirmation.Headline>
        <ModalConfirmation.Description>
          Are you sure you want to proceed with this operation?
        </ModalConfirmation.Description>
        <ModalConfirmation.Details details={[
          'This action cannot be undone',
          'All related data will be affected'
        ]} />
      </ModalConfirmation.Main>
      <ModalConfirmation.Actions>
        <Button onClick={onClose} variant={EnumVariant.Neutral}>
          Cancel
        </Button>
        <Button onClick={onConfirm} variant={EnumVariant.Danger}>
          Confirm
        </Button>
      </ModalConfirmation.Actions>
    </ModalConfirmation>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack