AlertDialog & LiquidGlassDialog

Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation. This page documents both the standard AlertDialog and the modern LiquidGlassDialog.

Usage

AlertDialog

LiquidGlassDialog

vue

<template>
  <Column :gap="30">
    <Text :style="TextStyle({ fontSize: 30, fontWeight: FontWeight.w500 })">AlertDialog</Text>
    <Button @click="showDefaultDialog">Default Dialog with default actions</Button>
    <Button @click="showDialog">Show Dialog with custom actions</Button>
    <Button @click="showIOSDialog">Show iOS Style Dialog</Button>
    <Button @click="showImperativeDialog">Imperative Dialog</Button>
  </Column>
  <SizedBox height="50"></SizedBox>
  <Column :gap="30">
    <Text :style="TextStyle({ fontSize: 30, fontWeight: FontWeight.w500 })">LiquidGlassDialog</Text>
    <Button @pressed="showOnly1ActionDialog">Only One Action Dialog</Button>
    <Button @pressed="showNetworkDialog"> Three Actions Dialog</Button>
    <Button @pressed="showPasteDialog">Two Actions Dialog</Button>
    <Button @pressed="showImperativeLiquidGlassDialog">Imperative LiquidGlassDialog</Button>
  </Column>

  <AlertDialog
    v-model:visible="dialogVisible"
    :constraints="BoxConstraints({ minWidth: 400, maxWidth: 600 })"
    title="Alert with custom actions"
    content="This is an alert dialog with custom actions."
  >
    <template #actions>
      <Button @click="dialogVisible = false">Cancel</Button>
      <Button @click="dialogVisible = false">OK</Button>
    </template>
  </AlertDialog>
  <AlertDialog
    v-model:visible="iosDialogVisible"
    title="Confirm Delete"
    content="Are you sure you want to delete this item? This action cannot be undone."
    variant="ios"
  />

  <AlertDialog
    v-model:visible="defaultDialogVisible"
    :constraints="BoxConstraints({ minWidth: 400, maxWidth: 600 })"
    title="Alert with default actions"
    content="This is an alert dialog."
  >
  </AlertDialog>

  <LiquidGlassDialog
    v-model="liquidGlassDialogs.one"
    title="Note"
    message="Hello"
    :actions="singleAction"
  />
  <LiquidGlassDialog
    v-model="liquidGlassDialogs.network"
    title="Allow Wireless Data Usage?"
    message="Some features may not be available when wireless data is turned off."
    :actions="networkActions"
    @action="handleNetworkAction"
    @close="onDialogClose"
  />
  <LiquidGlassDialog
    v-model="liquidGlassDialogs.paste"
    title="Paste from MacBook Pro'"
    message="Do you allow this?"
    :actions="pasteActions"
    @action="handlePasteAction"
  />
</template>

<script setup lang="ts">
import {
  FontWeight,
  LiquidGlassDialog,
  LiquidGlassDialogAction,
  LiquidGlassDialogActionPayload,
  SizedBox,
  Text,
  TextStyle,
} from "fluekit";
import { reactive, ref } from "vue";
import {
  AlertDialog,
  BoxConstraints,
  Button,
  Column,
  showAlertDialog,
  showLiquidGlassDialog,
} from "fluekit";

const dialogVisible = ref(false);
const defaultDialogVisible = ref(false);
const iosDialogVisible = ref(false);

const showDialog = () => {
  dialogVisible.value = true;
};
const showDefaultDialog = () => {
  defaultDialogVisible.value = true;
};
const showIOSDialog = () => {
  iosDialogVisible.value = true;
};

const showImperativeDialog = () => {
  showAlertDialog({
    title: "Imperative Dialog",
    content: "This dialog was created using showAlertDialog().",
    onOk: () => alert("Imperative OK"),
    onClose: () => alert("Imperative Closed"),
  });
};

const showImperativeLiquidGlassDialog = () => {
  showLiquidGlassDialog({
    title: "Imperative LiquidGlassDialog",
    message: "This dialog was created using showLiquidGlassDialog().",
    actions: [
      {
        title: "Cancel",
        style: "default",
        onPressed: async () => console.log("Imperative Cancel"),
      },
      {
        title: "OK",
        style: "primary",
        onPressed: async () => console.log("Imperative OK"),
      },
    ],
    onClose: () => console.log("Imperative LiquidGlassDialog Closed"),
  });
};

interface LiquidGlassDialogs {
  network: boolean;
  paste: boolean;
  one: boolean;
}
const liquidGlassDialogs = reactive<LiquidGlassDialogs>({
  network: false,
  paste: false,
  one: false,
});
const singleAction = ref<LiquidGlassDialogAction[]>([{ title: "OK", style: "default" }]);
const networkActions = ref<LiquidGlassDialogAction[]>([
  { title: "WLAN & Cellular", style: "default" },
  { title: "WLAN Only", style: "default" },
  { title: "Don't Allow", style: "primary" },
]);
const pasteActions = ref<LiquidGlassDialogAction[]>([
  { title: "Allow Paste", style: "default" },
  { title: "Don't Allow Paste", style: "primary" },
]);
const showNetworkDialog = () => (liquidGlassDialogs.network = true);
const showOnly1ActionDialog = () => (liquidGlassDialogs.one = true);
const showPasteDialog = () => (liquidGlassDialogs.paste = true);
const handleNetworkAction = (payload: LiquidGlassDialogActionPayload): void => {
  const { action, index } = payload;
  console.log("Network Permisson:", action.title, "Index:", index, action.title);
};

const handlePasteAction = (payload: LiquidGlassDialogActionPayload): void => {
  const { action, index } = payload;
  console.log("Paste  :", action.title, "Allowed:", index === 0);
};
const onDialogClose = (): void => console.log("Dialog Closed");
</script>

API

Props

Name	Type	Default	Description
`visible`	`boolean`	`false`	Whether the dialog is visible.
`title`	`string`	-	The title of the dialog.
`content`	`string`	-	The content of the dialog.
`barrierDismissible`	`boolean`	`true`	Whether the dialog can be dismissed by tapping outside.
`alignment`	`Alignment`	`Alignment.center`	The alignment of the dialog within the screen.
`barrierColor`	`string`	`'rgba(0,0,0,0.54)'`	The background color of the barrier overlay.
`constraints`	`BoxConstraints`	-	Custom constraints for the dialog box.
`decoration`	`BoxDecoration`	-	Custom decoration (background, border, shadow) for the dialog.
`size`	`Size`	-	Explicit size for the dialog.
`actionsAlignment`	`MainAxisAlignment`	`MainAxisAlignment.end`	Alignment of the action buttons.
`titleAlignment`	`Alignment`	-	Alignment of the title.
`padding`	`EdgeInsets`	-	Padding inside the dialog content area.
`titleStyle`	`TextStyle`	-	Custom text style for the title.
`titleColor`	`string`	-	Color of the title text (overridden by `titleStyle`).
`titleFontSize`	`number`	`20`	Font size of the title text (overridden by `titleStyle`).
`variant`	`'material' \| 'ios'`	`'material'`	The style variant of the dialog.

Events

Name	Description
`update:visible`	Emitted when the visibility changes.
`close`	Emitted when the dialog is closed or cancelled.
`ok`	Emitted when the default OK button is clicked.

Slots

Name	Description
`default`	The content of the dialog (overrides `content` prop).
`actions`	The actions at the bottom of the dialog.

Imperative API

You can also use the showAlertDialog function to display a dialog programmatically.

typescript

import { showAlertDialog } from "fluekit";

showAlertDialog({
  title: "Confirmation",
  content: "Are you sure you want to proceed?",
  onOk: () => console.log("OK"),
  onClose: () => console.log("Closed"),
});

showAlertDialog(options)

Option	Type	Default	Description
`onOk`	`() => void`	-	Callback triggered when OK button is clicked
`onClose`	`() => void`	-	Callback triggered when dialog is closed
`...`	`Props`	-	All other props from AlertDialog component

LiquidGlassDialog

A modern, glassmorphism-style dialog component designed for high-end UI experiences. It features a blur effect and smooth animations.

API

Props

Name	Type	Default	Description
`modelValue`	`boolean`	-	Whether the dialog is visible (v-model).
`title`	`string`	`""`	The title of the dialog.
`message`	`string`	`""`	The message content of the dialog.
`actions`	`LiquidGlassDialogAction[]`	`[]`	Array of action buttons to display.

Events

Name	Payload	Description
`update:modelValue`	`boolean`	Emitted when the visibility changes.
`action`	`LiquidGlassDialogActionPayload`	Emitted when an action button is clicked (if no `onPressed` handler provided).
`close`	-	Emitted when the dialog is closed.

Types

LiquidGlassDialogAction

typescript

interface LiquidGlassDialogAction {
  title: string;
  style?: "default" | "primary"; // Default: "default"
  keepOpen?: boolean; // If true, dialog won't close automatically after action
  onPressed?: (action: LiquidGlassDialogAction) => Promise<void>; // Async handler
  [key: string]: unknown;
}

LiquidGlassDialogActionPayload

typescript

interface LiquidGlassDialogActionPayload {
  action: LiquidGlassDialogAction;
  index: number;
}

Imperative API

You can use the showLiquidGlassDialog function to display a dialog programmatically.

typescript

import { showLiquidGlassDialog } from "fluekit";

showLiquidGlassDialog({
  title: "Note",
  message: "Hello",
  actions: [{ title: "OK", style: "default" }],
  onClose: () => console.log("Closed"),
});

AlertDialog & LiquidGlassDialog ​

Usage ​

API ​

Props ​

Events ​

Slots ​

Imperative API ​

showAlertDialog(options) ​

LiquidGlassDialog ​

API ​

Props ​

Events ​

Types ​

LiquidGlassDialogAction ​

LiquidGlassDialogActionPayload ​

Imperative API ​

AlertDialog & LiquidGlassDialog

Usage

API

Props

Events

Slots

Imperative API

showAlertDialog(options)

LiquidGlassDialog

API

Props

Events

Types

LiquidGlassDialogAction

LiquidGlassDialogActionPayload

Imperative API