SidebarMenuSubButton() — ui Function Reference

Architecture documentation for the SidebarMenuSubButton() function in sidebar.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ SidebarMenuSubButton() — ui Function Reference

Dependency Diagram

graph TD
  5bfdbcdb_0f27_6c0f_bbb0_e8cd6ba8967c["SidebarMenuSubButton()"]
  cc4e35e8_a38d_157c_ff53_3fbfa32c26c4["sidebar.tsx"]
  5bfdbcdb_0f27_6c0f_bbb0_e8cd6ba8967c -->|defined in| cc4e35e8_a38d_157c_ff53_3fbfa32c26c4
  style 5bfdbcdb_0f27_6c0f_bbb0_e8cd6ba8967c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/ui-rtl/sidebar.tsx lines 665–695

function SidebarMenuSubButton({
  render,
  size = "md",
  isActive = false,
  className,
  ...props
}: useRender.ComponentProps<"a"> &
  React.ComponentProps<"a"> & {
    size?: "sm" | "md"
    isActive?: boolean
  }) {
  return useRender({
    defaultTagName: "a",
    props: mergeProps<"a">(
      {
        className: cn(
          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px rtl:translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
          className
        ),
      },
      props
    ),
    render,
    state: {
      slot: "sidebar-menu-sub-button",
      sidebar: "menu-sub-button",
      size,
      active: isActive,
    },
  })
}