Flyout
The Flyout component is a panel that slides in from the left or right edge of the screen and contains contextual information or actions. We use this most often for modals and forms for adding or editing table data.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop showOverlay | Type boolean | Default value false | Description Whether to show the backdrop overlay behind the flyout |
Prop size | Type "default" | "narrow" | "wide" | "widest" | Default value "default" | Description Width size variant of the flyout panel |
Prop type | Type "default" | "inline" | Default value "default" | Description Display type - default (overlay) or inline (within page flow) |
Prop strategy | Type "relative" | "absolute" | "fixed" | Default value "relative" | Description CSS positioning strategy for the flyout panel |
Prop align | Type "start" | "end" | Default value "end" | Description Alignment of the flyout - start (left) or end (right) |
Prop closeOnInteractOutside | Type boolean | Default value false | Description Whether clicking outside the flyout should close it |
Prop width | Type string | Default value undefined | Description Custom width for the flyout (e.g., "400px", "50%"). Overrides size when specified. |
Quick Start
import { Flyout, Button, Text } from '@clickhouse/click-ui'
function MyFlyout() {
return (
<Flyout>
<Flyout.Trigger>
<Button type="primary" label="Open Flyout" />
</Flyout.Trigger>
<Flyout.Content showOverlay={true} align="end" strategy="fixed">
<Flyout.Header title="Flyout Title" description="Description" />
<Flyout.Body>
<Flyout.Element>
<Text>Content goes here</Text>
</Flyout.Element>
</Flyout.Body>
<Flyout.Footer>
<Flyout.Close label="Cancel" />
<Button type="primary" label="Save" />
</Flyout.Footer>
</Flyout.Content>
</Flyout>
)
}Related Components
- Dialog: For centered modal dialogs instead of side panels.
- Popover: For smaller contextual content without full panels.
- Button: Commonly used as a flyout trigger.
Common Use Cases
Form Flyout
import { Flyout, Button, Text } from '@clickhouse/click-ui'
function FormFlyout() {
return (
<Flyout>
<Flyout.Trigger>
<Button type="primary" label="Add Item" />
</Flyout.Trigger>
<Flyout.Content strategy="fixed" align="end" showOverlay={true}>
<Flyout.Header title="Add New Item" description="Fill in the details" />
<Flyout.Body>
<Flyout.Element>
<Text>Form content</Text>
</Flyout.Element>
</Flyout.Body>
<Flyout.Footer>
<Flyout.Close label="Cancel" />
<Button type="primary" label="Save" />
</Flyout.Footer>
</Flyout.Content>
</Flyout>
)
}Settings Flyout
import { Flyout, Button, Text } from '@clickhouse/click-ui'
function SettingsFlyout() {
return (
<Flyout>
<Flyout.Trigger>
<Button type="secondary" label="Settings" />
</Flyout.Trigger>
<Flyout.Content strategy="fixed" align="end" size="narrow" showOverlay={true}>
<Flyout.Header title="Settings" description="Configure preferences" />
<Flyout.Body>
<Flyout.Element>
<Text>Settings content</Text>
</Flyout.Element>
</Flyout.Body>
<Flyout.Footer>
<Flyout.Close label="Close" />
</Flyout.Footer>
</Flyout.Content>
</Flyout>
)
}