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

​
Examples

  • States
  • Badges
  • Collapsed Sidebar
Sidebar button states example

Different button states for sidebar navigation.

NeoSidebarButton(
  label: "Dashboard",
  icon: PhosphorIcons.squaresFour,
  isActive: true,
  onPressed: () {},
),

​
Properties

​
Required

​
label
String
required
The text label displayed on the button. Also used as tooltip text when sidebar is collapsed.
​
onPressed
VoidCallback
required
The callback function triggered when the button is pressed.

​
Content

​
icon
PhosphorIconData Function(PhosphorIconsStyle)
The icon to display on the button. Use PhosphorIcons.yourIconName. The widget automatically changes the icon style based on the active state.
​
badgeText
String
When provided, a badge will be displayed on the button. Transforms into an indicator dot when sidebar is collapsed.
​
badgeColor
Color
The color of the badge.
​
hasCaret
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

​
isActive
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

  • Combine with NeoHaptics in the onPressed callback for enhanced user experience on supported devices.
  • Badge Usage: Use badges for:
    • Notification counts (e.g., “3”, “12”)
    • Status indicators (e.g., “NEW”, “BETA”)
    • Alert symbols (e.g., ”!”)

​
Integration Notes

  • Designed to work seamlessly with the NeoSidebarLayout and automatically responds to sidebar state changes.
  • Tooltips automatically appear on when sidebar is collapsed.
  • Badge positioning adapts intelligently based on sidebar state.
⌘I