Show a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.
modal
portal
We are going to discuss what we have achieved on the project.
12 Jan 2022 18:00 to 19:00
Alert 10 minutes before start
123456789101112131415161718192021222324252627import * as Ariakit from "@ariakit/react"; import "./style.css"; export default function Example() { return ( <Ariakit.PopoverProvider> <Ariakit.PopoverDisclosure className="button"> Accept invite </Ariakit.PopoverDisclosure> <Ariakit.Popover className="popover"> <Ariakit.PopoverArrow className="arrow" /> <Ariakit.PopoverHeading className="heading"> Team meeting </Ariakit.PopoverHeading> <Ariakit.PopoverDescription> We are going to discuss what we have achieved on the project. </Ariakit.PopoverDescription> <div> <p>12 Jan 2022 18:00 to 19:00</p> <p>Alert 10 minutes before start</p> </div> <Ariakit.Button className="button">Accept</Ariakit.Button> </Ariakit.Popover> </Ariakit.PopoverProvider> ); } import * as Ariakit from "@ariakit/react"; import "./style.css"; export default function Example() { return ( <Ariakit.PopoverProvider> <Ariakit.PopoverDisclosure className="button"> Accept invite </Ariakit.PopoverDisclosure> <Ariakit.Popover className="popover"> <Ariakit.PopoverArrow className="arrow" /> <Ariakit.PopoverHeading className="heading"> Team meeting </Ariakit.PopoverHeading> <Ariakit.PopoverDescription> We are going to discuss what we have achieved on the project. </Ariakit.PopoverDescription> <div> <p>12 Jan 2022 18:00 to 19:00</p> <p>Alert 10 minutes before start</p> </div> <Ariakit.Button className="button">Accept</Ariakit.Button> </Ariakit.Popover> </Ariakit.PopoverProvider> ); }
import * as Ariakit from "@ariakit/react"; import "./style.css"; export default function Example() { return ( <Ariakit.PopoverProvider> <Ariakit.PopoverDisclosure className="button"> Accept invite </Ariakit.PopoverDisclosure> <Ariakit.Popover className="popover"> <Ariakit.PopoverArrow className="arrow" /> <Ariakit.PopoverHeading className="heading"> Team meeting </Ariakit.PopoverHeading> <Ariakit.PopoverDescription> We are going to discuss what we have achieved on the project. </Ariakit.PopoverDescription> <div> <p>12 Jan 2022 18:00 to 19:00</p> <p>Alert 10 minutes before start</p> </div> <Ariakit.Button className="button">Accept</Ariakit.Button> </Ariakit.Popover> </Ariakit.PopoverProvider> ); } import * as Ariakit from "@ariakit/react"; import "./style.css"; export default function Example() { return ( <Ariakit.PopoverProvider> <Ariakit.PopoverDisclosure className="button"> Accept invite </Ariakit.PopoverDisclosure> <Ariakit.Popover className="popover"> <Ariakit.PopoverArrow className="arrow" /> <Ariakit.PopoverHeading className="heading"> Team meeting </Ariakit.PopoverHeading> <Ariakit.PopoverDescription> We are going to discuss what we have achieved on the project. </Ariakit.PopoverDescription> <div> <p>12 Jan 2022 18:00 to 19:00</p> <p>Alert 10 minutes before start</p> </div> <Ariakit.Button className="button">Accept</Ariakit.Button> </Ariakit.Popover> </Ariakit.PopoverProvider> ); }
usePopoverStore() usePopoverContext() <PopoverProvider> <PopoverAnchor /> <PopoverDisclosure /> <Popover> <PopoverArrow /> <PopoverHeading /> <PopoverDescription /> <PopoverDismiss /> </Popover> </PopoverProvider> usePopoverStore() usePopoverContext() <PopoverProvider> <PopoverAnchor /> <PopoverDisclosure /> <Popover> <PopoverArrow /> <PopoverHeading /> <PopoverDescription /> <PopoverDismiss /> </Popover> </PopoverProvider>
Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.
No spam. Unsubscribe anytime. Read latest issue