Components

ConfirmationDialog

ConfirmationDialog presents a stack of actions that asks the user to confirm an intent. It aligns with SwiftUI's confirmationDialog mental model while using web-native dialog semantics.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Button } from '@swiftuijs/ui';
import { ConfirmationDialog } from '@swiftuijs/ui';
function DefaultDialog() {
    const [isVisible, setIsVisible] = useState(false);
    return (<>
      <Button onClick={() => setIsVisible(true)}>Show Confirmation Dialog</Button>
      <ConfirmationDialog title="Delete draft?" message="This action cannot be undone." isVisible={isVisible} onDismiss={() => setIsVisible(false)} actions={[
            { label: 'Delete', style: 'destructive', action: () => setIsVisible(false) },
            { label: 'Cancel', style: 'cancel', action: () => setIsVisible(false) },
        ]}/>
    </>);
}
export default function Example() {
    return (<DefaultDialog />);
}

Usage and limitations

  • Use actions to declare the available choices.
  • cancel and destructive action styles mirror Apple's emphasis rules.
  • The dialog dismisses on action selection, backdrop click, or Escape.
  • The bottom surface leaves space for the home indicator and scrolls on short screens. On wide screens it stays horizontally centered at a maximum width of 420px; automatic iPad-style popover adaptation is not implemented.

API reference

PropTypeRequiredDescription
titlestringNoOptional title shown above the actions.
messagestringNoOptional supporting message.
isVisiblebooleanYesWhether the dialog is currently visible.
onDismiss() => voidYesCalled when the dialog should close.
actionsIConfirmationDialogAction[]YesAvailable actions.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

ColorPicker

ColorPicker wraps the native color input while keeping SwiftUI-style label and value semantics.

ContainerBackground

ContainerBackground adapts SwiftUI's `containerBackground(_:for:)` modifier into an explicit surface wrapper for navigation and grouped content areas.