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

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

# SidebarMenuSubButton

**Type**: component

Interactive button component for submenu navigation The primary interactive element for nested navigation items within submenus, featuring support for active states, different sizes, and composition patterns. Designed specifically for hierarchical navigation with appropriate styling and spacing.

## JSX Usage

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

<SidebarMenuSubButton
  asChild={true}
  size={value}
  isActive={true}
  className="value"
/>
```

## Component Props

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

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

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

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

## Examples

### Example 1
```tsx
// Basic submenu button
<SidebarMenuSubItem>
  <SidebarMenuSubButton>
    <span>Documentation</span>
  </SidebarMenuSubButton>
</SidebarMenuSubItem>
```
### Example 2
```tsx
// Link composition with active state
<SidebarMenuSubItem>
  <SidebarMenuSubButton
    asChild
    isActive={pathname === '/projects/mobile'}
  >
    <Link href="/projects/mobile">
      <span>Mobile Application</span>
    </Link>
  </SidebarMenuSubButton>
</SidebarMenuSubItem>
```
### Example 3
```tsx
// Small size variant
<SidebarMenuSubItem>
  <SidebarMenuSubButton size="sm">
    <span>API Reference</span>
  </SidebarMenuSubButton>
</SidebarMenuSubItem>
```
### Example 4
```tsx
// With icon and custom styling
<SidebarMenuSubItem>
  <SidebarMenuSubButton className="gap-3">
    <File className="h-3 w-3" />
    <span>README.md</span>
  </SidebarMenuSubButton>
</SidebarMenuSubItem>
```