Button

Examples

Variants
Icons
Sizes
States

NeoButton(
  variant: .primary,
  label: "Primary",
  onPressed: () {},
),

NeoButton(
  variant: .secondary,
  label: "Secondary",
  onPressed: () {},
),

NeoButton(
  variant: .tertiary,
  label: "Tertiary",
  onPressed: () {},
),

NeoButton(
  variant: .link,
  label: "Link",
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  label: "Create",
  icon: PhosphorIconsRegular.plus,
  onPressed: () {},
),

NeoButton(
  variant: .secondary,
  label: "Open",
  icon: PhosphorIconsRegular.arrowUpRight,
  iconPosition: .trailing,
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  icon: PhosphorIconsRegular.trash,
  isDanger: true,
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  size: .medium,
  label: "Medium",
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  size: .small,
  label: "Small",
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  isExpanded: true,
  label: "Expanded",
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  isExpanded: true,
  alignment: .start,
  label: "Aligned",
  icon: PhosphorIconsRegular.alignLeft,
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  label: "Save Changes",
  isLoading: true,
  onPressed: () {},
),

NeoButton(
  variant: .primary,
  label: "Delete Account",
  isDanger: true,
  onPressed: () {},
),

NeoButton(
  variant: .filled,
  label: "Submit",
  isEnabled: false,
  onPressed: () {},
),

Properties

Required

NeoButtonVariant

required

The variant/style of the button.

VoidCallback

required

The callback to call when the button is pressed.

Content

String

The text label to display on the button.

PhosphorIconData

The icon to display on the button. (e.g. PhosphorIconsRegular.plus)

NeoButtonIconPosition

default:".leading"

The position of the icon. Only applies when icon is provided.

The tooltip text to display when over the button.

bool

Adds a caret icon to the button and rotates it based on this boolean value. Useful for dropdown toggles.

Layout

NeoButtonSize

default:".medium"

The size of the button.

bool

default:"false"

Whether the button should fill the available width.

NeoButtonAlignment

default:".center"

The alignment of the content inside the button. Only applies when isExpanded is true.

State

bool

default:"false"

Shows a spinning indicator and disables interaction. Useful for async operations.

bool

default:"false"

Applies danger styling (typically red colors) to indicate destructive actions like deletion.

bool

default:"true"

Controls whether the button responds to user interaction. Disabled buttons have reduced opacity and show a forbidden cursor.

bool

default:"false"

When enabled, users must hold the button for a specified duration before the action is triggered. Only supported for NeoButtonVariant.secondary buttons.

Duration

default:"Duration(seconds: 1)"

The duration users must hold the button when requireHold is true.

Styling

Color

The background color of the button. Only valid on the primary variant — use fgColor and fgInteractionColor for other variants.

Color

The background color for both hover and pressed states. Overrides the theme-derived interaction color.

Color

The foreground color of all content inside the button (label, icon, caret). Essential when using custom background colors.

Color

The foreground color for both hover and pressed states.

Enums

NeoButtonVariant

Different variants/styles of buttons.

primary: Solid fill for high emphasis.
secondary: Border-only for medium emphasis.
tertiary: 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

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Examples

Properties

Required

Content

Layout

State

Styling

Enums

NeoButtonVariant

NeoButtonSize

NeoButtonAlignment

NeoButtonIconPosition

Best Practices

​Examples

​Properties

​Required

​Content

​Layout

​State

​Styling

​Enums

​NeoButtonVariant

​NeoButtonSize

​NeoButtonAlignment

​NeoButtonIconPosition

​Best Practices

Examples

Properties

Required

Content

Layout

State

Styling

Enums

NeoButtonVariant

NeoButtonSize

NeoButtonAlignment

NeoButtonIconPosition

Best Practices