SidebarTrigger() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ SidebarTrigger() — ui Function Reference

Dependency Diagram

graph TD
  345a5a47_7e96_5372_e327_7654654f0edb["SidebarTrigger()"]
  c6a487be_ed5c_9993_6886_f0ead3f0c895["sidebar.tsx"]
  345a5a47_7e96_5372_e327_7654654f0edb -->|defined in| c6a487be_ed5c_9993_6886_f0ead3f0c895
  52d21307_ed91_78c1_4615_7ac238598d75["useSidebar()"]
  345a5a47_7e96_5372_e327_7654654f0edb -->|calls| 52d21307_ed91_78c1_4615_7ac238598d75
  style 345a5a47_7e96_5372_e327_7654654f0edb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/sidebar.tsx lines 253–284

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon-sm"
      className={cn("cn-sidebar-trigger", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <IconPlaceholder
        lucide="PanelLeftIcon"
        tabler="IconLayoutSidebar"
        hugeicons="SidebarLeftIcon"
        phosphor="SidebarIcon"
        remixicon="RiSideBarLine"
        className="cn-rtl-flip"
      />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}