@real-system/popover

Popover component for real system.

Installation

# install peer dependencies

# npm
$ npm install react react-dom @real-system/ariakit-library @real-system/animation-library @real-system/elements-primitive @real-system/button @real-system/styled-library @real-system/flex @real-system/typography @real-system/utils-library
# yarn
$ yarn add react react-dom @real-system/ariakit-library @real-system/animation-library @real-system/elements-primitive @real-system/button @real-system/styled-library @real-system/flex @real-system/typography @real-system/utils-library

# install popover

# npm
$ npm install @real-system/popover
# yarn
$ yarn add @real-system/popover

Code Example

import { Popover } from '@real-system/popover';

/** or import each component
import {
  PopoverButton,
  PopoverContainer,
  PopoverDescription,
  PopoverDismiss,
  PopoverHeading,
} from '@real-system/popover';
**/

const MyComponent = (args) => {
  return (
    <Popover.Container placement="auto">
      <Popover.Button>Open Popover</Popover.Button>
      <Popover hideCloseButton={true}>
        <Popover.Heading mb={6}>Meet Popover</Popover.Heading>
        <Popover.Description mb={8}>
          Hello there. I am a popover! Use me as a non-modal dialog to display
          additional rich content above your UI.
        </Popover.Description>
        <Popover.Dismiss variant="primary">Confirm</Popover.Dismiss>
      </Popover>
    </Popover.Container>
  );
};

export const Default = Template.bind({});