---
title: Flyout
description: The Flyout component is a panel that slides in from the left or right edge of the screen and contains contextual information or actions.
category: Overlays
related: [Dialog, Popover, Button]
commonPatterns: [form-flyout, settings-flyout, detail-flyout]
---

Source: https://clickhouse.design/click-ui/flyout

# 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                                                                        |
| ---------------------- | --------------------------------------------- | ------------- | ---------------------------------------------------------------------------------- |
| showOverlay            | `boolean`                                     | `false`       | Whether to show the backdrop overlay behind the flyout                             |
| size                   | `"default" \| "narrow" \| "wide" \| "widest"` | `"default"`   | Width size variant of the flyout panel                                             |
| type                   | `"default" \| "inline"`                       | `"default"`   | Display type - default (overlay) or inline (within page flow)                      |
| strategy               | `"relative" \| "absolute" \| "fixed"`         | `"relative"`  | CSS positioning strategy for the flyout panel                                      |
| align                  | `"start" \| "end"`                            | `"end"`       | Alignment of the flyout - start (left) or end (right)                              |
| closeOnInteractOutside | `boolean`                                     | `false`       | Whether clicking outside the flyout should close it                                |
| width                  | `string`                                      | `undefined`   | Custom width for the flyout (e.g., "400px", "50%"). Overrides size when specified. |

```tsx
import { Flyout, Button } from '@clickhouse/click-ui'

<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="Useful description" />
  <Flyout.Body>
    <Flyout.Element>
      Content goes here
    </Flyout.Element>
  </Flyout.Body>
  <Flyout.Footer>
    <Flyout.Close label="Cancel" />
    <Button type="primary" label="Save" />
  </Flyout.Footer>
</Flyout.Content>
</Flyout>
```

## Quick start

```tsx
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

```tsx
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

```tsx
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>
)
}
```

### Left-aligned flyout