Popover

Display content in a portal triggered by a button.

Anatomy

Mount all pieces together and create your Popover

import { Popover } from '@micode-ui/react';
 
<Popover.Root>
  <Popover.Trigger />
  <Popover.Content />
</Popover.Root>

Example

<Surface>
  <Popover.Root>
    <Popover.Trigger asChild>
      <IconButton>
        <Info />
      </IconButton>
    </Popover.Trigger>
    <Popover.Content side='top'>
      <Heading size='md'>Popover</Heading>
      <Text size='sm'>This is a Popover component</Text>
    </Popover.Content>
  </Popover.Root>
</Surface>

API Reference

Root

Contains all parts of the Popover.

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`modal`	`boolean`	`false`

Trigger

The button that toggles the popover. By default, the Popover.Content will position itself against the trigger.

Prop	Type	Default
`asChild`	`boolean`	`false`

Content

The component that pops out when the popover is open.

Prop	Type	Default
`asChild`	`boolean`	`false`
`onOpenAutoFocus`	`function`	No default value
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onFocusOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value
`forceMount`	`boolean`	No default value
`side`	`enum`	`"top"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

Multi Step Text Area