IconButton

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 button component that displays only an icon with loading state support.

When to use this

Toolbars: Create compact action buttons in toolbars and app bars
Icon actions: Provide quick actions with recognizable icons
Space-constrained interfaces: Use where space is limited
Floating actions: Create floating action buttons with custom styling

Basic implementation

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

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      spacing: 16,
      children: [
        RemixIconButton(
          icon: CupertinoIcons.heart,
          semanticLabel: 'Favorite',
          onPressed: () {},
          style: style,
        ),
        RemixIconButton(
          icon: CupertinoIcons.heart,
          semanticLabel: 'Favorite',
          onPressed: () {},
          style: style,
          loading: true,
        ),
      ],
    );
  }

  IconButtonStyler get style {
    return IconButtonStyler()
        .iconColor(Colors.blueGrey.shade700)
        .iconSize(22)
        .size(40, 40)
        .color(Colors.blueGrey.shade50.withValues(alpha: 0.6))
        .border(.color(Colors.blueGrey.shade100).width(1.5))
        .borderRadius(.all(const Radius.circular(8)))
        .spinner(
          SpinnerStyler()
              .size(22)
              .strokeWidth(1.3)
              .indicatorColor(Colors.blueGrey.shade600),
        )
        .onHovered(
          IconButtonStyler()
              .color(Colors.blueGrey.shade100.withValues(alpha: 0.4)),
        )
        .onPressed(
          IconButtonStyler()
              .color(Colors.blueGrey.shade100.withValues(alpha: 0.8)),
        );
  }
}

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 FortalIconButtonExample extends StatelessWidget {
  const FortalIconButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      children: [
        FortalIconButton.solid(
          icon: Icons.add,
          semanticLabel: 'Add',
          onPressed: () {},
        ),
        FortalIconButton.soft(
          icon: Icons.edit,
          semanticLabel: 'Edit',
          onPressed: () {},
        ),
        FortalIconButton.surface(
          icon: Icons.layers,
          semanticLabel: 'Layers',
          onPressed: () {},
        ),
        FortalIconButton.outline(
          icon: Icons.border_style,
          semanticLabel: 'Border style',
          onPressed: () {},
        ),
        FortalIconButton.ghost(
          icon: Icons.delete,
          semanticLabel: 'Delete',
          onPressed: () {},
        ),
      ],
    );
  }
}

See the fortalIconButtonStyle source code for all available options.

Constructor

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

RemixIconButton remixIconButtonConstructor({
  Key? key,
  required IconData icon,
  required String semanticLabel,
  RemixIconButtonIconBuilder? iconBuilder,
  RemixIconButtonLoadingBuilder? loadingBuilder,
  bool loading = false,
  bool enabled = true,
  bool enableFeedback = true,
  VoidCallback? onPressed,
  VoidCallback? onLongPress,
  FocusNode? focusNode,
  bool autofocus = false,
  String? semanticHint,
  bool excludeSemantics = false,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  IconButtonStyler style = const IconButtonStyler.create(),
  IconButtonSpec? styleSpec,
}) => throw UnimplementedError();

Properties

`style` → `IconButtonStyler`

Optional. The style configuration for the icon button. Customize colors, sizing, and state-based styling.

`styleSpec` → `IconButtonSpec?`

Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.

`key` → `Key?`

Optional. Controls how one widget replaces another widget in the tree.

`icon` → `IconData`

Required. The icon to display in the button.

`iconBuilder` → `RemixIconButtonIconBuilder?`

Optional. Builder for customizing the icon rendering.

`loadingBuilder` → `RemixIconButtonLoadingBuilder?`

Optional. Builder for customizing the loading state rendering.

`autofocus` → `bool`

Optional. Whether the button should automatically request focus when it is created.

`loading` → `bool`

Optional. Whether the button is in a loading state. When true, the button will display a spinner and become non-interactive.

`enabled` → `bool`

Optional. Whether this icon button is enabled. When false, press callbacks are suppressed even if [onPressed] is provided.

`enableFeedback` → `bool`

Optional. Whether to provide feedback when the button is pressed. Defaults to true.

`onPressed` → `VoidCallback?`

Optional. Callback function called when the button is pressed. If null, the button will be considered disabled.

`onLongPress` → `VoidCallback?`

Optional. Callback function called when the button is long pressed.

`focusNode` → `FocusNode?`

Optional. Optional focus node to control the button's focus behavior.

`semanticLabel` → `String`

Required. The accessible name screen readers announce for this icon-only button. Must be nonblank — there is no generic fallback name.

`semanticHint` → `String?`

Optional. The semantic hint for the button. Provides additional context about what will happen when the button is activated.

`excludeSemantics` → `bool`

Optional. Whether to exclude child semantics. When true, the semantics of child widgets will be excluded. Defaults to false.

`mouseCursor` → `MouseCursor`

Optional. Cursor when hovering over the button. Defaults to [SystemMouseCursors.click] when enabled.

Style Methods

`container(BoxStyler value)`

Configures the icon button container style.

`icon(IconStyler value)`

Configures the icon style using an IconStyler.

`spinner(SpinnerStyler value)`

Configures the loading spinner style.

`color(Color value)`

Sets background color

`iconColor(Color value)`

Sets the icon color.

`padding(EdgeInsetsGeometryMix value)`

Sets padding

`borderRadius(BorderRadiusGeometryMix radius)`

Sets border radius

`size(double width, double height)`

Sets size. Icon buttons are square, so pass the same value twice: .size(40, 40).

`border(BoxBorderMix value)`

Sets border

`margin(EdgeInsetsGeometryMix value)`

Sets margin

`alignment(Alignment value)`

Sets container alignment

`decoration(DecorationMix value)`

Sets decoration

`constraints(BoxConstraintsMix value)`

Sets constraints

`iconColor(Color value)`

Sets icon color

`iconSize(double value)`

Sets icon size

`width(double value)`

Sets width

`height(double value)`

Sets height

`animate(AnimationConfig value)`

Configures implicit animation for style transitions.

`variants(List<VariantStyle<IconButtonSpec>> value)`

Sets style variants.

`foregroundDecoration(DecorationMix value)`

Sets a foreground decoration painted on top of the component.

`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`

Applies a matrix transformation to the component.

`wrap(WidgetModifierConfig value)`

Applies widget modifiers such as clipping, opacity, or scaling.

`modifier(WidgetModifierConfig value)`

Sets the widget modifier.

`call({ ... })`

Creates a RemixIconButton widget with this style applied.

`iconOpacity(double value)`

Sets icon opacity

`iconWeight(double value)`

Sets icon weight (useful for variable icons like Material Symbols)

`iconGrade(double value)`

Sets icon grade (useful for Material Icons)

`iconFill(double value)`

Sets icon fill (useful for Material Icons filled variants)

`iconOpticalSize(double value)`

Sets icon optical size (useful for Material Icons)

`iconBlendMode(BlendMode value)`

Sets icon blend mode

`iconTextDirection(TextDirection value)`

Sets icon text direction

`iconShadows(List<ShadowMix> value)`

Sets icon shadows

`iconShadow(ShadowMix value)`

Sets single icon shadow

On this page