diff --git a/components/popup.mdx b/components/popup.mdx new file mode 100644 index 000000000..9438aabd5 --- /dev/null +++ b/components/popup.mdx @@ -0,0 +1,61 @@ +--- +title: "Popup" +description: "Display contextual content in a floating overlay triggered by a click." +keywords: ["popup", "popover", "overlay", "click", "floating content"] +--- + +Use popups to display additional content in a floating overlay when users click on a trigger element. Unlike [tooltips](/components/tooltips) that appear on hover, popups require a click to open and can contain interactive content. + + + Click to see more + + This content appears in a popup overlay. + + You can include **formatted text**, links, and other components. + + + +```mdx Popup example + + Click to see more + + This content appears in a popup overlay. + + You can include **formatted text**, links, and other components. + + +``` + +## Structure + +A popup consists of three components that work together: + +- `` - The wrapper component that manages state +- `` - The clickable element that opens the popup +- `` - The content displayed in the floating overlay + +All three components are required and must be nested in this order. + +## Example with styled trigger + +You can style the trigger text to make it more prominent: + + + + Learn more about our pricing + + + Our pricing is based on usage. Contact sales for enterprise pricing. + + + +```mdx Styled trigger example + + + Learn more about our pricing + + + Our pricing is based on usage. Contact sales for enterprise pricing. + + +``` diff --git a/docs.json b/docs.json index af6197bee..b11521796 100644 --- a/docs.json +++ b/docs.json @@ -107,6 +107,7 @@ "components/icons", "components/mermaid-diagrams", "components/panel", + "components/popup", "components/prompt", "components/responses", "components/steps",