A button component that displays only an icon with loading state support.

Interactive preview

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: .center,
      spacing: 16,
      children: [
        RemixIconButton(
          icon: CupertinoIcons.heart,
          onPressed: () {},
          style: style,
        ),
        RemixIconButton(
          icon: CupertinoIcons.heart,
          onPressed: () {},
          style: style,
          loading: true,
        ),
      ],
    );
  }
 
  RemixIconButtonStyler get style {
    return RemixIconButtonStyler()
        .foregroundColor(Colors.blueGrey.shade700)
        .iconSize(22)
        .size(40, 40)
        .backgroundColor(Colors.blueGrey.shade50.withValues(alpha: 0.6))
        .border(.all(.color(Colors.blueGrey.shade100).width(1.5)))
        .borderRadius(.circular(8))
        .spinner(
          .size(22).strokeWidth(1.3).indicatorColor(Colors.blueGrey.shade600),
        )
        .onHovered(.color(Colors.blueGrey.shade100.withValues(alpha: 0.4)))
        .onPressed(.color(Colors.blueGrey.shade100.withValues(alpha: 0.8)));
  }
}

Fortal widgets

Remix includes a generated Fortal-themed widget for this component:

import 'package:flutter/material.dart';
import 'package:remix/remix.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, onPressed: () {}),
        FortalIconButton.soft(icon: Icons.edit, onPressed: () {}),
        FortalIconButton.surface(icon: Icons.layers, onPressed: () {}),
        FortalIconButton.outline(icon: Icons.border_style, onPressed: () {}),
        FortalIconButton.ghost(icon: Icons.delete, onPressed: () {}),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

style → RemixIconButtonStyler

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

styleSpec → RemixIconButtonSpec?

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?

Optional. The semantic label for the button. Used by screen readers to describe the button.

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(RemixSpinnerStyler value)

Configures the loading spinner style.

color(Color value)

Sets background color

backgroundColor(Color value)

Sets the background color of the icon button container.

foregroundColor(Color value)

Sets the foreground color (icon color) of the icon button.

padding(EdgeInsetsGeometryMix value)

Sets padding

borderRadius(BorderRadiusGeometryMix radius)

Sets border radius

iconButtonSize(double size)

Sets size (width and height - icon buttons are square)

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<RemixIconButtonSpec>> value)

Sets style variants.

foregroundDecoration(DecorationMix value)

Sets a foreground decoration painted on top of the component.

transform(Matrix4 value, {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