Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Panel
  3. Usage

Panel

Usage

Overview
Panel is one tile of a workspace: a bordered surface with a header and, when needed, a body. It imports no layout library, owns no position or size, and does not track windows. Whether a panel is popped out is the header's variant, which the host sets.
Composition
  • Panel — Root section; give it aria-label when it should be a region landmark.
  • PanelHeader — Title or tabs, actions, pop-out, collapse, dock-back, fullscreen and the actions menu (last at the inline end unless actionable={false}).
  • PanelBody — Named inline-size container (panel) for content queries.
  • PanelError — role="alert" failure state that keeps the header reachable.
Header only
children may be only a PanelHeader. The root hugs the header in an auto block-size parent and still fills a fixed-height tile. Popped-out window-frame padding applies only when a PanelBody is present.
When to use
  • Resizable workspace tiles (maps, queues, transcripts) with pop-out and dock-back.
  • Container-query layouts that respond to panel width, not viewport width.
When not to use
  • Simple cards or static sections — use Card or page chrome.
  • Slide-over surfaces — use Drawer.
Related components
  • Drawer for viewport-edge overlays.
  • Panel placeholder for what a popped-out tile leaves behind.
Previous
Pagination / Accessibility
Next
Panel / Accessibility
On this page
Overview
Composition
Header only
When to use
When not to use
Related components