> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.
# Sidebar Button
> A specialized button designed for integrating perfectly into sidebar navigation with support for collapsing states.
This widget is specifically designed for use within the [NeoSidebarLayout](../../layouts/sidebar) and should not be used outside of that context.
## Examples
```dart Active State lines theme={null}
NeoSidebarButton(
label: "Dashboard",
icon: PhosphorIcons.squaresFour,
isActive: true,
onPressed: () {},
),
```
```dart Default State lines theme={null}
NeoSidebarButton(
label: "Products",
icon: PhosphorIcons.tag,
onPressed: () {},
),
```
```dart Notification Badge lines theme={null}
NeoSidebarButton(
label: "Orders",
icon: PhosphorIcons.receipt,
badgeText: "138",
badgeColor: theme.colors.fgDanger,
isActive: true,
onPressed: () {},
),
```
```dart New Feature Badge lines theme={null}
NeoSidebarButton(
label: "Reports",
icon: PhosphorIcons.trendUp,
badgeText: "NEW",
badgeColor: theme.colors.fgSuccess,
onPressed: () {},
),
```
```dart Beta Badge lines theme={null}
NeoSidebarButton(
label: "Devices",
icon: PhosphorIcons.devices,
badgeText: "BETA",
onPressed: () {},
),
```
When the sidebar is collapsed, label is hidden and badges transform into indicator dots. Tooltips automatically appear on hover to show the button's purpose.
```dart Collapsed lines theme={null}
NeoSidebarButton(
label: "Orders",
icon: PhosphorIcons.receipt,
badgeText: "138",
badgeColor: theme.colors.fgDanger,
isActive: true,
onPressed: () {},
),
```
## Properties
### Required
The text label displayed on the button. Also used as tooltip text when sidebar is collapsed.
The callback function triggered when the button is pressed.
### Content
The icon to display on the button. Use `PhosphorIcons.yourIconName`. The widget automatically changes the icon style based on the active state.
When provided, a badge will be displayed on the button. Transforms into an indicator dot when sidebar is collapsed.
The color of the badge.
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
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`](/utilities/haptics) 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](../../layouts/sidebar) and automatically responds to sidebar state changes.
* Tooltips automatically appear on hover when sidebar is collapsed.
* Badge positioning adapts intelligently based on sidebar state.