IconButton

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,
          onPressed: () {},
          style: style,
        ),
        RemixIconButton(
          icon: CupertinoIcons.heart,
          onPressed: () {},
          style: style,
          loading: true,
        ),
      ],
    );
  }

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

Fortal styles

Remix includes Fortal-themed style helpers 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 Row(
      spacing: 16,
      children: [
        RemixIconButton(
          icon: Icons.add,
          onPressed: () {},
          style: FortalIconButtonStyle.solid(),
        ),
        RemixIconButton(
          icon: Icons.edit,
          onPressed: () {},
          style: FortalIconButtonStyle.soft(),
        ),
        RemixIconButton(
          icon: Icons.delete,
          onPressed: () {},
          style: FortalIconButtonStyle.ghost(),
        ),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

style → RemixIconButtonStyle

Optional.

styleSpec → RemixIconButtonSpec?

Optional.

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.

enableFeedback → bool

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

onPressed → VoidCallback?

Required. 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.

onDoubleTap → VoidCallback?

Optional. Callback function called when the button is double tapped.

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

icon(IconStyler value)

spinner(RemixSpinnerStyle value)

color(Color value)

Sets background color

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 animation)

foregroundDecoration(DecorationMix value)

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

wrap(WidgetModifierConfig value)

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