Popup

When to use it

The Popup component is used to display a small overlay with additional information or actions. It is commonly used for tooltips, dropdown menus, and other interactive elements that require a temporary display of content.

Variants

To override the default color of the selected item, set --selected-color to the desired color. To override the border radius, set --popup-radius to a different value. The "arrow" can be positioned in different corners using modifiers such as .c-popup--[top|bottom]-left and .c-popup--[top|bottom]-right.

What it looks like

Code examples

<div class="c-popup c-popup--top-right">
    <nav class="c-popup__body">
        <h2 class="c-popup__title">Land</h2>
        <a href="#/se" class="c-popup__item c-popup__item--selected">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#09528A"/></g><path stroke="#EFD358" stroke-width="6" d="M12 0v24M0 12h24"></path></svg>
            Sverige
        </a>
        <a href="#/no" class="c-popup__item">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#E63031"/></g><g><path stroke="#FFF" stroke-width="9" d="M12 0v24M0 12h24"></path></g><g><path stroke="#203B75" stroke-width="6" d="M12 0v24M0 12h24"></path></g></svg>
            Norge
        </a>
        <a href="#/dk" class="c-popup__item">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#D01134"/></g><path stroke="#ECECEC" stroke-width="6" d="M12 0v24M0 12h24"></path></svg>
            Danmark
        </a>
        <hr class="c-popup__divider">
        <h2 class="c-popup__title">Språk</h2>
        <a href="#/se/sv/start" class="c-popup__item c-popup__item--selected">Svenska</a>
        <a href="#/se/en/start" class="c-popup__item">English</a>
        <a href="#/se/nb/start" class="c-popup__item">Norsk</a>
        <a href="#/se/da/start" class="c-popup__item">Dansk</a>
        <h2 class="c-popup__title">Actions</h2>
        <button type="button" class="c-popup__item">Edit</button>
        <button type="button" class="c-popup__item delete">Delete</button>
    </nav>
</div>

Accessibility notes

In forced colors mode, the popup has an outline in the system text color to keep its boundary visible when shadows disappear, without changing its dimensions.

This component is ideal for use as a popover, which comes with some built-in accessibility support. However, the browser support is still an issue since it's a quite new addition to the spec. Currently, we only use popover popups in Blink Mobile, where we have 100% control over the both software and hardware setup.