Popover - React

View on Figma View on GitHub

import { Popover } from '@sky-uk/ui-core';

The Popover component triggers an overlay to present related additional information that can't be accommodated directly on a page.

<Popover>
    <Popover.Control>
        <Button $variant="tertiary">Tell me more</Button>
    </Popover.Control>

    <Popover.Content>
        <p>Nec vivamus commodo volutpat dapibus condimentum phasellusNec</p>
    </Popover.Content>
</Popover>

Props

$placement

bottom-left
bottom-center
bottom-right

$popoverWidth

By default the width of the popover is set to auto. This will either mach the smaller of the Popover.Control or content width. If you want to set a fixed width, you can use the $popoverWidth prop.

<Popover $popoverWidth="280px">
    <Popover.Control>
        <Button $variant="tertiary">Tell me more</Button>
    </Popover.Control>

    <Popover.Content>
        <p>Nec vivamus commodo volutpat dapibus condimentum phasellusNec</p>
    </Popover.Content>
</Popover>