styple

Popover

Displays content near a Button when its clicked.

Example

import { Popover } from "@styple/design-system";

<Flex
  css={{
    gap: "$md",
    alignItems: "center",
  }}
>
  <Popover content="Popover content">
    <Button highlight size="circle">
      <Plus style={{ verticalAlign: "middle" }} />
    </Button>
  </Popover>
  <Popover
    content={
      <><b>Drag</b> to move <br /> <b>Click</b> to open menu</>
    }
  >
    <Button highlight css={{ p: "0", borderRadius: "$md" }}>
      <GripVertical style={{ verticalAlign: "middle" }} />
    </Button>
  </Popover>
</Flex>

API Reference

See Radix-UI Popover (v0.1.6) for details. This only covers styple abstractions.

A styled abstraction of the entire primitive. Forwards props open, defaultOpen and onOpenChange. Custom props:

Prop	Type	Default	Explanation
`children`	`ReactElement`	-	Child to trigger popover.
`content`	`ReactNode`	-	The content of the popover.

NavItem

Radio