button-system

Button System Architecture

Two-layer system:

1. CupertinoButtonWidget - Base interactive widget for all tappable elements
2. ButtonWidget - High-level themed button with automatic sizing and styling

CupertinoButtonWidget (Base Layer)

Low-level widget providing:

• Opacity animation on press (default 0.8)
• Tap, long press, double tap, drag gestures
• Loading state with CupertinoActivityIndicator
• Auto focus management

Basic Usage

CupertinoButtonWidget(
  onPressed: () {},
  color: theme.defaultColors.systemBlue,
  borderRadius: BorderRadius.circular(12),
  padding: EdgeInsets.all(16),
  child: Text('Button'),
)

With Loading State

CupertinoButtonWidget(
  onPressed: isLoading ? null : () {},
  displayCupertinoActivityIndicator: isLoading,
  color: theme.defaultColors.systemBlue,
  child: Text('Submit'),
)

With Gradient

CupertinoButtonWidget(
  onPressed: () {},
  backgroundGradient: LinearGradient(
    colors: [
      theme.defaultColors.systemPurple,
      theme.defaultColors.systemPink,
    ],
  ),
  child: Text('Premium'),
)

ButtonWidget (High Layer)

High-level button with automatic theming.

Label Button

ButtonWidget.label(
  size: const LargeButtonSize(),
  color: const BlueButtonColor(),
  label: 'Continue',
  leftIcon: CupertinoIcons.checkmark,
  onPressed: () {},
)

Icon-Only Button

ButtonWidget.icon(
  size: const MediumButtonSize(),
  color: const GreyTransparentButtonColor(),
  leftIcon: CupertinoIcons.add,
  onPressed: () {},
)

Button Sizes

SmallButtonSize

• Min height: 28pt
• Border radius: 14pt
• Typography: subheadline (15pt)
• Use for: Secondary actions, compact UIs

MediumButtonSize

• Min height: 34pt
• Border radius: 50pt (pill)
• Typography: body (17pt)
• Use for: Standard buttons, toolbars

LargeButtonSize

• Min height: 50pt
• Border radius: 12pt
• Typography: body (17pt)
• Use for: Primary CTAs, main actions

CustomButtonSize

Define your own dimensions:

const CustomButtonSize(
  borderRadius: BorderRadius.all(Radius.circular(16)),
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 18),
  iconSize: 22,
  boxConstraints: BoxConstraints(minHeight: 56, minWidth: 56),
)