-
-
Notifications
You must be signed in to change notification settings - Fork 7.4k
Open
Labels
bugSomething isn't workingSomething isn't working
Description
Describe the bug
Bug: SidebarMenuButton size="lg" doesn't collapse properly to icon-only mode
Description
When using <SidebarMenuButton size="lg">, the button doesn't properly collapse to icon-only mode when the sidebar is in collapsible="icon" state. The text remains visible instead of being hidden like it does with size="default".
Steps to Reproduce
- Create a sidebar with
collapsible="icon"mode - Add a
<SidebarMenuButton tooltip="Title" size="lg">containing an icon and text - Collapse the sidebar to icon-only mode
- Observe that the text is still visible
Expected Behavior
The button should shrink to 32x32px (icon-only) when collapsed, matching the behavior of size="default".
Actual Behavior
The button retains its full height (48px) and text remains visible when collapsed.
Root Cause
In sidebarMenuButtonVariants, the base class includes group-data-[collapsible=icon]:size-8! which constrains the button size when collapsed. However, the lg variant only has:
lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
Affected component/components
Sidebar
How to reproduce
- Use the
@shadcn/uisidebar withcollapsible="icon"enabled. - Add a
<SidebarMenuButton size="lg">containing an icon and text. - Collapse the sidebar to icon-only mode.
- Notice that the text is still visible and the button stays
h-12instead of collapsing tosize-8.
### System Info
```bash
**System Info**
- Operating System: Windows 10
- Browser: Chrome 143 (latest)
- Node.js: v20+
- Next.js: v15 (App Router)
- @shadcn/ui: latest version
- Tailwind CSS: v4
- Using: `<SidebarMenuButton size="lg">`
- Sidebar: `collapsible="icon"`
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working