@neynar/ui/llm-docs/sidebar-menu-button.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# SidebarMenuButton

**Type**: component

Interactive navigation button for sidebar menu items The primary interactive element for sidebar navigation, offering a flexible button component that supports active states, multiple visual variants, tooltip integration for collapsed modes, and composition patterns through the asChild prop. Automatically adapts its appearance based on sidebar state and provides smooth hover/focus transitions.

## JSX Usage

```jsx
import { SidebarMenuButton } from '@neynar/ui';

<SidebarMenuButton
  asChild={true}
  isActive={true}
  variant={value}
  size={value}
  tooltip={value}
  className="value"
/>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### isActive
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### variant
- **Type**: `"default" | "outline"`
- **Required**: No
- **Description**: No description available

### size
- **Type**: `"default" | "sm" | "lg"`
- **Required**: No
- **Description**: No description available

### tooltip
- **Type**: `string | React.ComponentProps<typeof TooltipContent>`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic navigation button
<SidebarMenuButton>
  <Home className="h-4 w-4" />
  <span>Dashboard</span>
</SidebarMenuButton>
```
### Example 2
```tsx
// Active state with Link composition
<SidebarMenuButton asChild isActive={pathname === '/dashboard'}>
  <Link href="/dashboard">
    <Home className="h-4 w-4" />
    <span>Dashboard</span>
  </Link>
</SidebarMenuButton>
```
### Example 3
```tsx
// With tooltip for collapsed mode
<SidebarMenuButton tooltip="Go to Dashboard">
  <Home className="h-4 w-4" />
  <span>Dashboard</span>
</SidebarMenuButton>
```
### Example 4
```tsx
// Different variants and sizes
<SidebarMenuButton variant="outline" size="lg">
  <Settings className="h-4 w-4" />
  <span>Settings</span>
</SidebarMenuButton>
```
### Example 5
```tsx
// Custom tooltip with props
<SidebarMenuButton
  tooltip={{
    children: "Dashboard Overview",
    side: "right",
    sideOffset: 10
  }}
>
  <Home className="h-4 w-4" />
  <span>Dashboard</span>
</SidebarMenuButton>
```