Button
A customizable button component with text, optional icons, loading states, and comprehensive styling support
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,
),
],
),
);
}
RemixButtonStyle get destructiveStyle {
return RemixButtonStyle()
.paddingX(16)
.paddingY(10)
.color(const Color(0xFF4D1919))
.shadow(
BoxShadowMix().color(Colors.redAccent).blurRadius(10).spreadRadius(0),
)
.label(
TextStyler().uppercase().color(Colors.redAccent),
)
.shapeBeveledRectangle(
borderRadius: BorderRadiusMix()
.bottomLeft(const Radius.circular(12))
.topRight(const Radius.circular(12)),
side: BorderSideMix.width(1).color(Colors.redAccent),
)
.wrapScale(x: 1, y: 1)
.onPressed(
RemixButtonStyle().wrapScale(x: 0.90, y: 0.90),
)
.onHovered(
RemixButtonStyle()
.color(const Color(0xFF732D2D))
.animate(AnimationConfig.spring(300.ms)),
)
.onFocused(
RemixButtonStyle().color(const Color(0xFF732D2D)),
);
}
RemixButtonStyle get successStyle {
return destructiveStyle
.color(const Color.fromARGB(255, 15, 61, 15))
.label(TextStyler().uppercase().color(Colors.greenAccent))
.shapeBeveledRectangle(
side: BorderSideMix().color(Colors.greenAccent),
)
.shadow(
BoxShadowMix()
.color(Colors.greenAccent)
.blurRadius(10)
.spreadRadius(0),
)
.onHovered(
RemixButtonStyle().color(const Color(0xFF357857)),
)
.onFocused(
RemixButtonStyle().color(const Color(0xFF357857)),
);
}
}
Fortal styles
Remix includes Fortal-themed style helpers for this component:
import 'package:flutter/material.dart';
import 'package:remix/remix.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
RemixButton(
label: 'Solid Button',
onPressed: () {},
style: FortalButtonStyle.solid(),
),
// Soft variant - Medium emphasis, secondary actions
RemixButton(
label: 'Soft Button',
onPressed: () {},
style: FortalButtonStyle.soft(),
),
// Surface variant - Subtle emphasis with border
RemixButton(
label: 'Surface Button',
onPressed: () {},
style: FortalButtonStyle.surface(),
),
// Outline variant - Low emphasis, tertiary actions
RemixButton(
label: 'Outline Button',
onPressed: () {},
style: FortalButtonStyle.outline(),
),
// Ghost variant - Minimal styling, inline actions
RemixButton(
label: 'Ghost Button',
onPressed: () {},
style: FortalButtonStyle.ghost(),
),
],
);
}
}
See the FortalButtonStyle source code for all available options.
Constructor
const RemixButton({
Key? key,
required String label,
IconData? icon,
RemixButtonTextBuilder? textBuilder,
RemixButtonIconBuilder? iconBuilder,
RemixButtonLoadingBuilder? 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,
RemixButtonStyle style = const RemixButtonStyle.create(),
RemixButtonSpec? styleSpec,
})
label → String
Required. The label text to display in the button. If [textBuilder] is provided, this is ignored.
icon → IconData?
Optional. The icon to display in the button. If [iconBuilder] is provided, this is ignored.
loadingBuilder → RemixButtonLoadingBuilder?
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. The spinner can be customized via [spinnerBuilder].
enabled → bool
Optional. Whether the button is enabled. When false, the button will be disabled regardless of other conditions. Defaults to true.
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.
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.