Skip to main content

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.

​
Button Configuration Classes

The Nebux Design System provides four specialized configuration classes for buttons, allowing you to customize every aspect of button appearance, behavior, and state management.

​
ButtonStyleConfig

Configuration class for button visual styling and appearance. Encapsulates all style-related properties for the NbxButton widget, including variant, colors, border radius, and text styling.

​
Properties

​
variant
ButtonVariant
default:"ButtonVariant.filled"
The visual variant of the button. Available options:
  • ButtonVariant.filled - Filled button with solid background
  • ButtonVariant.outline - Button with border outline
  • ButtonVariant.text - Text-only button with underline
  • ButtonVariant.danger - Danger button with error color
​
customBackgroundColor
Color?
default:"null"
Custom background color for the button. When null, uses the theme’s default color for the selected variant.
​
borderRadius
double?
default:"8.0"
Custom border radius for the button corners in logical pixels. When null, defaults to 8.0.
​
textStyle
TextStyle?
default:"null"
Custom text style for the button text. When null, uses theme typography defaults based on variant.
​
customBorderSide
BorderSide?
default:"null"
Custom border configuration for outline buttons. When null, uses default border styling.

​
Constructor

const ButtonStyleConfig({
  this.variant = ButtonVariant.filled,
  this.customBackgroundColor,
  this.borderRadius,
  this.textStyle,
  this.customBorderSide,
})

​
Methods

​
copyWith
ButtonStyleConfig
Creates a copy of this configuration with specified fields replaced.
ButtonStyleConfig copyWith({
  ButtonVariant? variant,
  Color? customBackgroundColor,
  double? borderRadius,
  TextStyle? textStyle,
})

​
Usage Example

NbxButton(
  text: 'Submit',
  onPressed: () {},
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.filled,
    customBackgroundColor: Colors.blue,
    borderRadius: 12.0,
    textStyle: TextStyle(fontWeight: FontWeight.bold),
  ),
)

​
ButtonIconConfig

Configuration class for button icons and their styling. Encapsulates all icon-related properties including leading and trailing icons with their respective colors.

​
Properties

​
icon
IconData?
default:"null"
Icon to display before the button text (leading icon). When null, no leading icon is shown.
​
iconColor
Color?
default:"null"
The color of the leading icon. When null, uses the button’s foreground color.
​
trailingIcon
IconData?
default:"null"
Icon to display after the button text (trailing icon). When null, no trailing icon is shown.
​
trailingIconColor
Color?
default:"null"
The color of the trailing icon. When null, uses the button’s foreground color.

​
Constructor

const ButtonIconConfig({
  this.icon,
  this.iconColor,
  this.trailingIcon,
  this.trailingIconColor,
})

​
Methods

​
copyWith
ButtonIconConfig
Creates a copy of this configuration with specified fields replaced.
ButtonIconConfig copyWith({
  IconData? icon,
  Color? iconColor,
  IconData? trailingIcon,
  Color? trailingIconColor,
})

​
Usage Example

NbxButton(
  text: 'Add Item',
  onPressed: () {},
  iconConfig: ButtonIconConfig(
    icon: Icons.add,
    iconColor: Colors.white,
    trailingIcon: Icons.arrow_forward,
    trailingIconColor: Colors.white,
  ),
)

​
ButtonLayoutConfig

Configuration class for button layout properties. Encapsulates all layout-related properties including expansion behavior and sizing.

​
Properties

​
isExpanded
bool
default:"true"
Whether the button should expand to fill available width. When true, button width is set to double.infinity. When false, button takes only the space needed for its content.

​
Constructor

const ButtonLayoutConfig({
  this.isExpanded = true,
})

​
Methods

​
copyWith
ButtonLayoutConfig
Creates a copy of this configuration with specified fields replaced.
ButtonLayoutConfig copyWith({bool? isExpanded})

​
Usage Example

// Full-width button
NbxButton(
  text: 'Full Width',
  onPressed: () {},
  layoutConfig: ButtonLayoutConfig(isExpanded: true),
)

// Compact button
NbxButton(
  text: 'Compact',
  onPressed: () {},
  layoutConfig: ButtonLayoutConfig(isExpanded: false),
)

​
ButtonStateConfig

Configuration class for button state management. Encapsulates all state-related properties including loading state, enabled state, and selection state.

​
Properties

​
isLoading
bool
default:"false"
Whether to show a loading indicator instead of button text. When true, displays a circular progress indicator and disables the button.
​
enabled
bool
default:"true"
Whether the button is enabled and can respond to user interactions. When false, button appears disabled and onPressed callback is ignored.
​
isSelected
bool
default:"false"
Whether the button is in selected state. Primarily affects outline variant buttons by changing background and foreground colors.
​
loadingColor
Color?
default:"null"
Custom color for the loading spinner. When null, the spinner color is automatically derived from the button variant for proper contrast.

​
Constructor

const ButtonStateConfig({
  this.isLoading = false,
  this.enabled = true,
  this.isSelected = false,
  this.loadingColor,
})

​
Methods

​
copyWith
ButtonStateConfig
Creates a copy of this configuration with specified fields replaced.
ButtonStateConfig copyWith({
  bool? isLoading,
  bool? enabled,
  bool? isSelected,
  Color? loadingColor,
})

​
Usage Example

class SubmitButton extends StatefulWidget {
  @override
  State<SubmitButton> createState() => _SubmitButtonState();
}

class _SubmitButtonState extends State<SubmitButton> {
  bool _isLoading = false;

  Future<void> _handleSubmit() async {
    setState(() => _isLoading = true);
    // Perform async operation
    await Future.delayed(Duration(seconds: 2));
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return NbxButton(
      text: 'Submit',
      onPressed: _handleSubmit,
      stateConfig: ButtonStateConfig(
        isLoading: _isLoading,
        loadingColor: Colors.white,
      ),
    );
  }
}

​
Complete Example

Here’s a complete example showing all four configuration classes working together: 
NbxButton(
  text: 'Advanced Button',
  onPressed: () => print('Button pressed'),
  
  // Style configuration
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.filled,
    customBackgroundColor: Colors.deepPurple,
    borderRadius: 16.0,
    textStyle: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w600,
    ),
  ),
  
  // Icon configuration
  iconConfig: ButtonIconConfig(
    icon: Icons.send,
    iconColor: Colors.white,
  ),
  
  // Layout configuration
  layoutConfig: ButtonLayoutConfig(
    isExpanded: true,
  ),
  
  // State configuration
  stateConfig: ButtonStateConfig(
    isLoading: false,
    enabled: true,
  ),
)

​
Related Documentation