Skip to main content

​
Examples

  • Variants
  • Icons
  • Sizes
  • States
Button variants example

Different button styles for varying emphasis levels.

NeoButton(
  variant: NeoButtonVariant.filled,
  label: "Filled",
  onPressed: () {},
),

​
Properties

​
Required

​
variant
NeoButtonVariant
required
The variant/style of the button.
​
onPressed
VoidCallback
required
The callback to call when the button is pressed.

​
Content

​
label
String
The text label to display on the button.
​
icon
PhosphorIconData
The icon to display on the button. (e.g. PhosphorIconsRegular.plus)
​
iconPosition
NeoButtonIconPosition
default:"NeoButtonIconPosition.leading"
The position of the icon. Only applies when icon is provided.
​
tooltip
String
The tooltip text to display when over the button.
​
isCaretRotated
bool
Adds a caret icon to the button and rotates it based on this boolean value. Useful for dropdown toggles.

​
Layout

​
size
NeoButtonSize
default:"NeoButtonSize.medium"
The size of the button.
​
isExpanded
bool
default:"false"
Whether the button should fill the available width.
​
alignment
NeoButtonAlignment
default:"NeoButtonAlignment.center"
The alignment of the content inside the button. Only applies when isExpanded is true.

​
State

​
isLoading
bool
default:"false"
Shows a spinning indicator and disables interaction. Useful for async operations.
​
isDanger
bool
default:"false"
Applies danger styling (typically red colors) to indicate destructive actions like deletion.
​
isEnabled
bool
default:"true"
Controls whether the button responds to user interaction. Disabled buttons have reduced opacity and show a forbidden cursor.

​
Styling

​
bgColor
Color
The background color of the button. Overrides theme defaults for custom styling.
​
bgHoverColor
Color
The background color when hovering.
​
bgPressedColor
Color
The background color when pressed.
​
fgColor
Color
The foreground color of all content inside the button (label, icon, caret). Essential when using custom background colors.

​
Enums

​
NeoButtonVariant

Different variants/styles of buttons.
  • filled: Solid fill for high emphasis.
  • outlined: Border-only for medium emphasis.
  • ghost: No fill or border initially; fills on hover for low emphasis.
  • link: Underlined text style for low-emphasis actions and navigation.

​
NeoButtonSize

  • small: Compact size for dense UIs.
  • medium: Standard size for most cases.

​
NeoButtonAlignment

  • start: Aligns content to the left.
  • center: Default centering.

​
NeoButtonIconPosition

  • leading: Icon before label.
  • trailing: Icon after label.

​
Best Practices

  • Width Constraints: When using isExpanded: true, always provide width constraints to prevent layout issues by wrapping in Expanded, ConstrainedBox, SizedBox, etc.
  • Loading States: Use isLoading: true for async operations to provide visual feedback and prevent double-taps
  • Danger Actions: Always use isDanger: true for destructive actions like deletion or data loss
  • Combine with NeoHaptics in the onPressed callback for enhanced user experience on supported devices
  • Limit the number of primary (filled) buttons per screen to avoid decision paralysis
  • tooltip is essential for accessibility when using icon-only buttons, and helpful for providing additional context on any button
  • Edge case: If no label or icon is provided, the button renders as empty—always provide at least one
⌘I