Documentation Index
Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
NbxButton
A custom button widget that supports different variants, loading states, and comprehensive configuration.
Basic Usage
import 'package:nebux_design_system/nebux_design_system.dart';
NbxButton(
text: 'Click Me',
onPressed: () {
// Handle button press
},
)
Button Variants
NbxButton supports four visual variants:
Filled
Outline
Text
Danger
NbxButton(
text: 'Filled Button',
onPressed: () {},
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.filled,
),
)
NbxButton(
text: 'Outline Button',
onPressed: () {},
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.outline,
),
)
NbxButton(
text: 'Text Button',
onPressed: () {},
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.text,
),
)
NbxButton(
text: 'Delete',
onPressed: () {},
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.danger,
),
)
Configuration Options
NbxButton uses four configuration classes to organize its properties:
ButtonStyleConfig
Controls the visual appearance of the button.
variant
ButtonVariant
default:"ButtonVariant.filled"
The visual variant: filled, outline, text, or danger
Custom background color (overrides theme color)
Border radius for the button shape
Custom text style (overrides theme typography)
Custom border configuration for outline buttons
NbxButton(
text: 'Custom Style',
onPressed: () {},
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.filled,
customBackgroundColor: Colors.purple,
borderRadius: 16.0,
),
)
ButtonIconConfig
Adds icons to the button with customizable colors.
Leading icon displayed before the text
Color for the leading icon
Trailing icon displayed after the text
Color for the trailing icon
NbxButton(
text: 'Download',
onPressed: () {},
iconConfig: ButtonIconConfig(
icon: Icons.download,
iconColor: Colors.white,
),
)
ButtonStateConfig
Manages button state including loading, enabled, and selected.
Shows a circular progress indicator instead of text
Whether the button is enabled
Whether the button is in selected state (affects outline variant)
Custom color for the loading spinner
NbxButton(
text: 'Save',
onPressed: () {},
stateConfig: ButtonStateConfig(
isLoading: true,
),
)
ButtonLayoutConfig
Controls the button’s layout and sizing.
Whether the button expands to fill available width
NbxButton(
text: 'Compact Button',
onPressed: () {},
layoutConfig: ButtonLayoutConfig(
isExpanded: false,
),
)
Advanced Examples
Loading Button
class LoadingButtonExample extends StatefulWidget {
@override
State<LoadingButtonExample> createState() => _LoadingButtonExampleState();
}
class _LoadingButtonExampleState extends State<LoadingButtonExample> {
bool _isLoading = false;
Future<void> _handleSubmit() async {
setState(() => _isLoading = true);
// Simulate API call
await Future.delayed(Duration(seconds: 2));
setState(() => _isLoading = false);
}
@override
Widget build(BuildContext context) {
return NbxButton(
text: 'Submit',
onPressed: _handleSubmit,
stateConfig: ButtonStateConfig(
isLoading: _isLoading,
),
);
}
}
Button with Icons
NbxButton(
text: 'Send Message',
onPressed: () {},
iconConfig: ButtonIconConfig(
icon: Icons.send,
trailingIcon: Icons.arrow_forward,
),
styleConfig: ButtonStyleConfig(
variant: ButtonVariant.filled,
),
)
Disabled Button
NbxButton(
text: 'Disabled',
onPressed: () {},
stateConfig: ButtonStateConfig(
enabled: false,
),
)
NbxSocialLoginButton
A specialized button for social login providers (Google, Apple, Facebook, etc.) with icon and text layout.
Basic Usage
NbxSocialLoginButton(
text: 'Continue with Google',
icon: Icon(Icons.g_mobiledata, size: 24),
onPressed: () {
// Handle Google login
},
)
Properties
The button label text (e.g., “Continue with Google”)
The social provider icon widget
Callback invoked when the button is pressed
Whether to render as an outlined button (border-only)
Custom background color (defaults to black for filled, transparent for outlined)
Custom text color (defaults to white for filled, black for outlined)
Custom border color for outlined style (defaults to black)
Examples
NbxSocialLoginButton(
text: 'Continue with Apple',
icon: Icon(Icons.apple, size: 24),
onPressed: () {},
backgroundColor: Colors.black,
textColor: Colors.white,
)
NbxSocialLoginButton(
text: 'Continue with Facebook',
icon: Icon(Icons.facebook, size: 24),
onPressed: () {},
isOutlined: true,
borderColor: Color(0xFF1877F2),
textColor: Color(0xFF1877F2),
)
Social login buttons are always full-width (double.infinity) with a fixed height of 56 pixels and border radius of 16.
Best Practices
When a button is in loading state, it automatically disables the onPressed callback to prevent multiple submissions.
The button variant determines default text styles:
filled and danger use secondaryAction typographyoutline and text use content typography