Sidebar Button

This widget is specifically designed for use within the NeoSidebarLayout and should not be used outside of that context.

Examples

States
Badges
Collapsed Sidebar

NeoSidebarButton(
  label: "Dashboard",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.squaresFour
      : PhosphorIconsRegular.squaresFour,
  isActive: true,
  onPressed: () {},
),

NeoSidebarButton(
  label: "Products",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.tag
      : PhosphorIconsRegular.tag,
  onPressed: () {},
),

NeoSidebarButton(
  label: "Orders",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.receipt
      : PhosphorIconsRegular.receipt,
  badgeText: "138",
  badgeColor: theme.colors.danger,
  isActive: true,
  onPressed: () {},
),

NeoSidebarButton(
  label: "Reports",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.trendUp
      : PhosphorIconsRegular.trendUp,
  badgeText: "NEW",
  badgeColor: theme.colors.success,
  onPressed: () {},
),

NeoSidebarButton(
  label: "Devices",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.devices
      : PhosphorIconsRegular.devices,
  badgeText: "BETA",
  onPressed: () {},
),

When the sidebar is collapsed, label is hidden and badges transform into indicator dots. Tooltips automatically appear on to show the button’s purpose.

NeoSidebarButton(
  label: "Orders",
  icon: (style) => style == .duotone
      ? PhosphorIconsDuotone.receipt
      : PhosphorIconsRegular.receipt,
  badgeText: "138",
  badgeColor: theme.colors.danger,
  isActive: true,
  onPressed: () {},
),

Properties

Required

String

required

The text label displayed on the button. Also used as tooltip text when sidebar is collapsed.

VoidCallback

required

The callback function triggered when the button is pressed.

Content

Object Function(PhosphorIconsStyle)?

Icon callback from phosphoricons_flutter. Return PhosphorIconsDuotone.* for .duotone (active) and PhosphorIconsRegular.* for .regular.

String

When provided, a badge will be displayed on the button. Transforms into an indicator dot when sidebar is collapsed.

Color

The color of the badge.

bool

default:"false"

Whether to show a caret icon at the end of the button. Useful for indicating expandable sections. Hidden when sidebar is collapsed.

This feature is in alpha and may change. Behavior can be unpredictable.

State

bool

default:"false"

Whether the button is in an active/selected state. Active buttons have enhanced styling with duotone icons and branded colors.

Best Practices

Call NeoHaptics in onPressed when you want press feedback. This button does not play haptics on its own.
Use badgeText for a count or a short status such as “NEW”.

Behavior

It follows the sidebar’s collapsed state.
A tooltip shows on while the sidebar is collapsed.
The badge becomes an indicator when the sidebar collapses.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Sidebar Button

Examples

Properties

Required

Content

State

Best Practices

Behavior

​Examples

​Properties

​Required

​Content

​State

​Best Practices

​Behavior

Examples

Properties

Required

Content

State

Best Practices

Behavior