Skip to Content
UI Components/Cupertino UI/Cupertino Alert Dialog

Cupertino Alert Dialog

Native iOS-style alert dialogs with customizable actions

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

Alert.tsx
1import { FlutterCupertinoAlert } from '@openwebf/react-cupertino-ui';
2
3export function AlertExample() {
4  return (
5    <FlutterCupertinoAlert
6      title="Welcome"
7      message="This is a basic iOS-style alert dialog."
8      confirmText="OK"
9      onConfirm={() => console.log('Confirmed')}
10    />
11  );
12}

API Reference

Props (React)

NameTypeDefaultDescription
titlestring-Dialog title text.
messagestring-Dialog message/body text.
cancelTextstring-Cancel button label (omit to hide cancel).
confirmTextstring-Confirm button label.
onCancel(event: CustomEvent<void>) => void-Fires when cancel is pressed.
onConfirm(event: CustomEvent<void>) => void-Fires when confirm is pressed.

Methods (React ref)

NameTypeDefaultDescription
show(options)(options: { title?: string; message?: string }) => void-Show the dialog (optionally overriding title/message).
hide()() => void-Hide the dialog.
Full type definitions: npm package docs.