Examples
- States
- Badges
Different button states for sidebar navigation.
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
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.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
- Combine with
NeoHapticsin theonPressedcallback 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.