Button

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

A customizable button component that supports text with optional icons, loading states, and styling.

When to use this

Primary actions: Submit forms, confirm dialogs, save data, trigger main actions
Navigation: Navigate between screens, open new views, switch contexts
Trigger functions: Show modals, start processes, toggle features, execute commands
Call to action: Encourage users to take important actions within your app

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class ButtonExample extends StatelessWidget {
  const ButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 16,
        children: [
          RemixButton(
            onPressed: () {},
            label: 'Turn Off',
            style: destructiveStyle,
          ),
          RemixButton(
            onPressed: () {},
            label: 'Turn on',
            style: successStyle,
          ),
        ],
      ),
    );
  }

  ButtonStyler get destructiveStyle {
    return ButtonStyler()
        .padding(.horizontal(16))
        .padding(.vertical(10))
        .color(const Color(0xFF4D1919))
        .shadow(
          BoxShadowMix().color(Colors.redAccent).blurRadius(10).spreadRadius(0),
        )
        .label(
          TextStyler().uppercase().color(Colors.redAccent),
        )
        .shape(.beveledRectangle(
          borderRadius: BorderRadiusMix()
              .bottomLeft(const Radius.circular(12))
              .topRight(const Radius.circular(12)),
          side: BorderSideMix.width(1).color(Colors.redAccent),
        ))
        .wrap(.scale(x: 1, y: 1))
        .onPressed(
          .scale(0.90),
        )
        .onHovered(
          .color(const Color(0xFF732D2D))
              .animate(AnimationConfig.spring(300.ms)),
        )
        .onFocused(
          .color(const Color(0xFF732D2D)),
        );
  }

  ButtonStyler get successStyle {
    return destructiveStyle
        .color(const Color.fromARGB(255, 15, 61, 15))
        .label(TextStyler().uppercase().color(Colors.greenAccent))
        .shape(.beveledRectangle(
          side: BorderSideMix().color(Colors.greenAccent),
        ))
        .shadow(
          BoxShadowMix()
              .color(Colors.greenAccent)
              .blurRadius(10)
              .spreadRadius(0),
        )
        .onHovered(
          .color(const Color(0xFF357857)),
        )
        .onFocused(
          .color(const Color(0xFF357857)),
        );
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

Fortal variants

import 'package:flutter/material.dart';
import 'ui/ui.dart';

class FortalButtonExample extends StatelessWidget {
  const FortalButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        // Solid variant - High emphasis, primary actions
        FortalButton.solid(
          label: 'Solid Button',
          onPressed: () {},
        ),
        // Soft variant - Medium emphasis, secondary actions
        FortalButton.soft(
          label: 'Soft Button',
          onPressed: () {},
        ),
        // Surface variant - Subtle emphasis with border
        FortalButton.surface(
          label: 'Surface Button',
          onPressed: () {},
        ),
        // Outline variant - Low emphasis, tertiary actions
        FortalButton.outline(
          label: 'Outline Button',
          onPressed: () {},
        ),
        // Ghost variant - Minimal styling, inline actions
        FortalButton.ghost(
          label: 'Ghost Button',
          onPressed: () {},
        ),
      ],
    );
  }
}

See the fortalButtonStyle source code for all available options.

FortalButton.size selects layout, label and default icon dimensions. Leading and trailing icons share Fortal IconButton's token-based size scale: space3, space4, spinnerSize3, and space5 for sizes 1 through 4. The surrounding IconTheme no longer determines their size. Base RemixButton remains theme-neutral and still supports inherited sizing.

For an explicit per-button override, customize the icon styler through FortalButton(style: ButtonStyler().icon(IconStyler().size(14)), ...), or pass a customized Fortal recipe to RemixButton as below. Applications previously depending on IconTheme.size for Fortal buttons should use an explicit override.

Explicit Fortal icon size

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'ui/ui.dart';

class FortalButtonIconSizeExample extends StatelessWidget {
  const FortalButtonIconSizeExample({super.key});

  @override
  Widget build(BuildContext context) {
    return FortalScope(
      child: RemixButton(
        label: 'Save',
        leadingIcon: Icons.save,
        trailingIcon: Icons.check,
        onPressed: () {},
        style: fortalButtonStyle(variant: .soft, size: .size1)
            .icon(IconStyler().size(14)),
      ),
    );
  }
}

The 14-pixel value is a caller choice, not a Fortal size preset. This override applies to both default icon slots. Custom leadingIconBuilder and trailingIconBuilder implementations receive the icon spec and are responsible for applying it to their own widgets.

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixButton remixButtonConstructor({
  Key? key,
  required String label,
  IconData? leadingIcon,
  IconData? trailingIcon,
  RemixButtonTextBuilder? textBuilder,
  RemixButtonIconBuilder? leadingIconBuilder,
  RemixButtonIconBuilder? trailingIconBuilder,
  RemixButtonLoadingBuilder? loadingBuilder,
  bool loading = false,
  bool enabled = true,
  VoidCallback? onPressed,
  VoidCallback? onLongPress,
  FocusNode? focusNode,
  bool autofocus = false,
  bool enableFeedback = true,
  String? semanticLabel,
  String? semanticHint,
  bool excludeSemantics = false,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  ButtonStyler style = const ButtonStyler.create(),
  ButtonSpec? styleSpec,
}) => throw UnimplementedError();

On this page