FlowPanel
An absolutely-positioned slot for custom flow-canvas UI (legend, toolbar).
Category: display · WCAG 2.1-AA · flow, panel, slot, chrome
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | top-right | Position of the component. |
children | ReactNode | — | Content rendered inside the component. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-space-3
When to use
- Overlaying custom UI (a legend, a toolbar) on a flow canvas
When not to use
- For zoom/fit controls — use FlowControls
Examples
A legend panel
() => (
<div style={{ position: 'relative', height: 160, border: '1px solid var(--cascivo-color-border)' }}>
<FlowPanel position="top-right">Legend</FlowPanel>
</div>
)Related components
- FlowControls — Purpose-built zoom/fit chrome.