Flyout

A container component that shows or hides content relative to a trigger button, supporting both vertical and horizontal arrangements.

import { Flyout, Button, T } from '@kaynora/ui'

export default function () {
  return (
    <Flyout label='Products'>
      <div style={{
        display: 'flex',
        flexFlow: 'column',
        padding: '20px',
        gap: '20px',
      }}>
        <T color='dimmed' weight='500' size='s'>POWERFUL ANALYTICS</T>

        <div style={{
          display: 'flex',
          flexFlow: 'row nowrap',
          gap: '20px',
        }}>
          <div>
            <Button surface='hollow'><T>Dashboard</T></Button>
            <Button surface='hollow'><T>Analytics</T></Button>
            <Button surface='hollow'><T>Security & Privacy</T></Button>
          </div>

          <div>
            <Button surface='hollow'><T>Data Management</T></Button>
            <Button surface='hollow'><T>Monitoring</T></Button>
          </div>
        </div>
      </div>
    </Flyout>
  )
}

The arrangement prop determines the direction the content expands. Vertical is the default; horizontal is used in submenus.

import { Flyout, Button, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      gap: '40px',
    }}>
      <Flyout label='Vertical' arrangement='vertical'>
        <Button surface='hollow'><T>Option 1</T></Button>
        <Button surface='hollow'><T>Option 2</T></Button>
      </Flyout>
      <Flyout label='Horizontal' arrangement='horizontal'>
        <Button surface='hollow'><T>Option 1</T></Button>
        <Button surface='hollow'><T>Option 2</T></Button>
      </Flyout>
    </div>
  )
}

The isOpen and onOpenChange props allow controlling the flyout state from the parent component.

import { Flyout, Button, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Flyout label='Menu' isOpen={isOpen} onOpenChange={setIsOpen}>
      <Button surface='hollow'><T>Edit</T></Button>
      <Button surface='hollow'><T>Delete</T></Button>
    </Flyout>
  )
}

<Flyout />

ReactElement | ReactElement[]

string

boolean

boolean

(isOpen: boolean) => void

's' | 'm' | 'l'

'vertical' | 'horizontal'

boolean

{
  root: HTMLDivElementProps
  button: ButtonProps
  typography: TypographyProps
  popover: PopoverProps
}