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

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

# SidebarMenuBadge

**Type**: component

Badge indicator component for menu items Displays count indicators, status badges, or notification markers on menu items. Positioned on the right side of menu items and automatically coordinates with menu button states and sidebar collapse behavior.

## JSX Usage

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

<SidebarMenuBadge
  className="value"
/>
```

## Component Props

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

## Examples

### Example 1
```tsx
// Unread count badge
<SidebarMenuItem>
  <SidebarMenuButton>
    <Inbox />
    <span>Messages</span>
  </SidebarMenuButton>
  <SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>
```
### Example 2
```tsx
// Status indicator
<SidebarMenuItem>
  <SidebarMenuButton>
    <Activity />
    <span>System Status</span>
  </SidebarMenuButton>
  <SidebarMenuBadge className="bg-green-500">●</SidebarMenuBadge>
</SidebarMenuItem>
```
### Example 3
```tsx
// Dynamic badge with state
<SidebarMenuItem>
  <SidebarMenuButton>
    <Bell />
    <span>Notifications</span>
  </SidebarMenuButton>
  {notificationCount > 0 && (
    <SidebarMenuBadge>{notificationCount}</SidebarMenuBadge>
  )}
</SidebarMenuItem>
```