AlertDialog · Tinyrack Design System

Confirm destructive or irreversible actions in a modal that requires an explicit choice.

Contract

Axis	Contract
Actions	Pass only `TRButton` values, ordered from the safest action to the most destructive.
Dismissal	Backdrop taps are blocked; Escape and system back close the route.
Result and focus	`Navigator.pop` returns a typed result and focus returns to the opening control.
Overflow	Pass plain body content. AlertDialog keeps actions visible and scrolls overflow at the logical surface edge.

Use neutral outline styling for cancel and TRIntent.danger for destructive confirmation.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

Widget deleteRackButton(BuildContext context, VoidCallback onDelete) {
  return TRButton(
    intent: TRIntent.danger,
    onPressed: () async {
      final confirmed = await showTRAlertDialog<bool>(
        context: context,
        builder: (dialogContext) => TRAlertDialog(
          title: const Text('Delete rack?'),
          description: const Text('This action cannot be undone.'),
          actions: [
            TRButton(
              appearance: TRAppearance.outline,
              onPressed: () => Navigator.pop(dialogContext, false),
              child: const Text('Cancel'),
            ),
            TRButton(
              intent: TRIntent.danger,
              onPressed: () => Navigator.pop(dialogContext, true),
              child: const Text('Delete rack'),
            ),
          ],
        ),
      );
      if (confirmed == true) onDelete();
    },
    child: const Text('Delete rack'),
  );
}

Examples

Destructive confirmation permalink

Place the safe cancel action first and the danger confirmation last. The route returns the typed value passed to Navigator.pop.

Loading the Flutter preview

Labels, disabled state, and focus permalink

Long labels wrap at narrow widths, a disabled trigger cannot open the route, and Escape or Cancel returns focus to the trigger.

Loading the Flutter preview

Long body content permalink

AlertDialog owns overflow scrolling too, so callers pass plain content instead of nesting a scroll view. Decision actions remain visible above the software keyboard.

Loading the Flutter preview

API

TRAlertDialog

Prop	Type / default	Purpose
`actions`	`List<TRButton> = const []`	Buttons laid out with token spacing, wrapping, and end alignment.

showTRAlertDialog<T>

Prop	Type / default	Purpose
`route options`	`useSafeArea, useRootNavigator, requestFocus, routeSettings, anchorPoint`	Controls safe-area placement, navigator ownership, initial focus, route metadata, and foldable anchoring.