Floating Panel

Style

Semantic colors, visual variants, density, and corner radius via modifier classes on the floating panel root. Host semantics tint title and header chrome; the open trigger stays subtle.

Hex doc

Phoenix

Preview

    <.floating_panel class="floating-panel">
  <:trigger class="button ui-size-sm">Subtle (default)</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

Semantic

Use class="ui-{role}" to set the semantic palette of a floating panel.

Available options: accent, alert, brand, info, success

    <.floating_panel class="floating-panel">
  <:trigger class="button ui-size-sm">Default</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-accent">
  <:trigger class="button ui-size-sm">Accent</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-brand">
  <:trigger class="button ui-size-sm">Brand</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-alert">
  <:trigger class="button ui-size-sm">Alert</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-info">
  <:trigger class="button ui-size-sm">Info</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-success">
  <:trigger class="button ui-size-sm">Success</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

Variant

Variant modifiers control floating-panel surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.floating_panel class="floating-panel">
  <:trigger class="button ui-size-sm">Subtle (default)</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-solid">
  <:trigger class="button ui-size-sm">Solid</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>
<.floating_panel class="floating-panel ui-ghost">
  <:trigger class="button ui-size-sm">Ghost</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example floating-panel ui-accent ui-solid.

    <.floating_panel class="floating-panel">
  <:trigger class="button ui-size-sm">Base</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-solid">
  <:trigger class="button ui-size-sm">Base</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-ghost">
  <:trigger class="button ui-size-sm">Base</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-accent">
  <:trigger class="button ui-size-sm">Accent</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-accent ui-solid">
  <:trigger class="button ui-size-sm">Accent</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-accent ui-ghost">
  <:trigger class="button ui-size-sm">Accent</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-alert">
  <:trigger class="button ui-size-sm">Alert</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-alert ui-solid">
  <:trigger class="button ui-size-sm">Alert</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-alert ui-ghost">
  <:trigger class="button ui-size-sm">Alert</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-brand">
  <:trigger class="button ui-size-sm">Brand</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-brand ui-solid">
  <:trigger class="button ui-size-sm">Brand</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-brand ui-ghost">
  <:trigger class="button ui-size-sm">Brand</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-info">
  <:trigger class="button ui-size-sm">Info</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-info ui-solid">
  <:trigger class="button ui-size-sm">Info</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-info ui-ghost">
  <:trigger class="button ui-size-sm">Info</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-success">
  <:trigger class="button ui-size-sm">Success</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-success ui-solid">
  <:trigger class="button ui-size-sm">Success</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-success ui-ghost">
  <:trigger class="button ui-size-sm">Success</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work.</p></:content>
</.floating_panel>

Size

Use class="ui-size-{size}" to set the size of a floating panel.

Available options: xs, sm, md (default), lg, xl

    <.floating_panel class="floating-panel ui-size-sm">
  <:trigger class="button ui-size-sm">SM</:trigger>
  <:title>SM</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Panel density scales with ui-size-sm.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-size-md">
  <:trigger class="button ui-size-sm">MD</:trigger>
  <:title>MD</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Panel density scales with ui-size-md.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-size-lg">
  <:trigger class="button ui-size-sm">LG</:trigger>
  <:title>LG</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Panel density scales with ui-size-lg.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-size-xl">
  <:trigger class="button ui-size-sm">XL</:trigger>
  <:title>XL</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Panel density scales with ui-size-xl.</p></:content>
</.floating_panel>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a floating panel.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.floating_panel class="floating-panel ui-rounded-none">
  <:trigger class="button ui-size-sm">None</:trigger>
  <:title>None</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-none.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-rounded-sm">
  <:trigger class="button ui-size-sm">SM</:trigger>
  <:title>SM</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-sm.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-rounded-md">
  <:trigger class="button ui-size-sm">MD</:trigger>
  <:title>MD</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-md.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-rounded-lg">
  <:trigger class="button ui-size-sm">LG</:trigger>
  <:title>LG</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-lg.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-rounded-xl">
  <:trigger class="button ui-size-sm">XL</:trigger>
  <:title>XL</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-xl.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-rounded-full">
  <:trigger class="button ui-size-sm">Full</:trigger>
  <:title>Full</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Corner radius via ui-rounded-full.</p></:content>
</.floating_panel>

Max height

Use class="max-h-{step}" to set the maximum height of a floating panel root.

Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (floating-panel)

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.floating_panel class="floating-panel">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-9xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-8xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-7xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-6xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-5xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-4xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-3xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-2xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-xs">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-sm">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-md">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-lg">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-2xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-3xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-4xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-5xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-6xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-7xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-8xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>

<.floating_panel class="floating-panel ui-max-height-9xl">
  <:trigger class="button ui-size-sm">Open</:trigger>
  <:title>Notes</:title>
    <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>

  <:content><p>Drag, resize, and minimize this panel while you work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.</p></:content>
</.floating_panel>