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.

​
Overview

NbxButton is a flexible button component that provides consistent styling and behavior across the Nebux Design System. It supports multiple visual variants, loading states, icons, and comprehensive configuration options.

​
Basic Usage

NbxButton(
  text: 'Click Me',
  onPressed: () {
    print('Button pressed');
  },
)

​
Widget Properties

​
text
String
required
The text to display on the button.
​
onPressed
VoidCallback?
required
Callback function called when the button is pressed. Will be null when button is disabled or loading.
​
iconConfig
ButtonIconConfig
default:"const ButtonIconConfig()"
Configuration for button icons (leading and trailing).
​
styleConfig
ButtonStyleConfig
default:"const ButtonStyleConfig()"
Configuration for button styling (variant, colors, text style).
​
stateConfig
ButtonStateConfig
default:"const ButtonStateConfig()"
Configuration for button state (loading, enabled, selected).
​
layoutConfig
ButtonLayoutConfig
default:"const ButtonLayoutConfig()"
Configuration for button layout (expanded width).

​
Button Variants

The button supports four visual variants through ButtonVariant enum:
  • ButtonVariant.filled - Filled button with solid background (default)
  • ButtonVariant.text - Text button with underline decoration
  • ButtonVariant.outline - Outlined button with border
  • ButtonVariant.danger - Danger button with error color

​
Configuration Classes

​
ButtonIconConfig

Controls icon display and styling.
​
icon
IconData?
Icon to display before the text.
​
iconColor
Color?
The color of the leading icon.
​
trailingIcon
IconData?
Icon to display after the text.
​
trailingIconColor
Color?
The color of the trailing icon.

​
ButtonStyleConfig

Controls visual styling and appearance.
​
variant
ButtonVariant
default:"ButtonVariant.filled"
The visual variant of the button.
​
customBackgroundColor
Color?
Custom background color for the button.
​
borderRadius
double?
default:"8.0"
Custom border radius for the button.
​
textStyle
TextStyle?
Custom text style for the button.
​
customBorderSide
BorderSide?
Custom border configuration for outline variant.

​
ButtonStateConfig

Manages button state and behavior.
​
isLoading
bool
default:"false"
Whether to show a loading indicator instead of text.
​
enabled
bool
default:"true"
Whether the button is enabled.
​
isSelected
bool
default:"false"
Whether the button is selected (affects outline variant appearance).
​
loadingColor
Color?
Custom color for the loading spinner. When null, the spinner color is derived from the button variant.

​
ButtonLayoutConfig

Controls button layout properties.
​
isExpanded
bool
default:"true"
Whether the button should expand to fill available width.

​
Examples

​
Filled Button

NbxButton(
  text: 'Save',
  onPressed: () => _handleSave(),
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.filled,
  ),
)

​
Outlined Button with Icon

NbxButton(
  text: 'Edit Profile',
  onPressed: () => _editProfile(),
  iconConfig: ButtonIconConfig(
    icon: Icons.edit,
    iconColor: Colors.blue,
  ),
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.outline,
  ),
)

​
Loading Button

NbxButton(
  text: 'Submit',
  onPressed: () => _submit(),
  stateConfig: ButtonStateConfig(
    isLoading: true,
  ),
)

​
Danger Button

NbxButton(
  text: 'Delete Account',
  onPressed: () => _deleteAccount(),
  styleConfig: ButtonStyleConfig(
    variant: ButtonVariant.danger,
  ),
)

​
Button with Trailing Icon

NbxButton(
  text: 'Next',
  onPressed: () => _goNext(),
  iconConfig: ButtonIconConfig(
    trailingIcon: Icons.arrow_forward,
  ),
)

​
Disabled Button

NbxButton(
  text: 'Submit',
  onPressed: () => _submit(),
  stateConfig: ButtonStateConfig(
    enabled: false,
  ),
)

​
Compact Button (Not Expanded)

NbxButton(
  text: 'Cancel',
  onPressed: () => _cancel(),
  layoutConfig: ButtonLayoutConfig(
    isExpanded: false,
  ),
)

​
See Also