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,
  isDestructive: 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",
  isDestructive: true,
  onPressed: () {},
),

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

NeoButton(
  variant: .secondary,
  label: "Bold",
  isSelected: true,
  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.

Object?

The icon to display on the button. Pass a Phosphor icon from phosphoricons_flutter (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. The parent must give it a bounded width.

NeoButtonAlignment

default:".center"

The alignment of the content inside the button. Only applies when isExpanded 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). Set this when you set a custom background color.

Color

The foreground color for both hover and pressed states.

State

bool

default:"false"

Shows the hover fill at rest. Hover and press apply the interaction color to that fill again. A link keeps an empty fill. Its label, and any label with fgInteractionColor, uses the hover text color at rest, and hover applies the interaction color again.

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.

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

Set isDestructive: true for an action that deletes or destroys data.
Use one primary button on a screen.
Set tooltip on an icon-only button.

Behavior

If neither label nor icon is set, the button renders empty.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Examples

Properties

Required

Content

Layout

Styling

State

Enums

NeoButtonVariant

NeoButtonSize

NeoButtonAlignment

NeoButtonIconPosition

Best Practices

Behavior

​Examples

​Properties

​Required

​Content

​Layout

​Styling

​State

​Enums

​NeoButtonVariant

​NeoButtonSize

​NeoButtonAlignment

​NeoButtonIconPosition

​Best Practices

​Behavior

Examples

Properties

Required

Content

Layout

Styling

State

Enums

NeoButtonVariant

NeoButtonSize

NeoButtonAlignment

NeoButtonIconPosition

Best Practices

Behavior