Active theme set to Nord LightNord Dark and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Popout New

Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack style="margin-bottom: var(--n-space-xl)" direction="horizontal" justify-content="center">
<nord-button variant="primary" aria-controls="example" aria-haspopup="true">Toggle popout</nord-button>
</nord-stack>

<nord-popout id="example" position="block-start">
<div style="padding: var(--n-space-m)">Popout content</div>
</nord-popout>

Properties

PropertyAttributeDescriptionTypeDefault
alignalign

Set the alignment of the popout in relation to the toggle depending on the position. start will align the left of the popout to the left of the toggle. end will align the right of the popout to the right of the toggle. A popout with a set position of inline-start or inline-end will switch start and end to the top and bottom of the popout respectively.

"start" | "end""start"
positionposition

Set the position of the popout in relation to the toggle. Options follow logical properties. block-start and block-end referring to top and bottom respectively, inline-start and inline-end referring to left and right respectively.

"block-end" | "block-start" | "inline-start" | "inline-end""block-end"
idid

The id for the active element to reference via aria-controls.

string""

Events

EventDescriptionType
openDispatched when the popout is opened.NordEvent
closeDispatched when the popout is closed.NordEvent

Slots

Slot nameDescription
Default slotThe popout content.

Methods

Method nameParametersDescription
show() => voidN/AShow the popout, moving focus to the calendar inside.
hide(moveFocusToButton: boolean) => voidmoveFocusToButton: prevent focus returning to the target button. Default is true.
Hide the popout.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Always position popout next to the button or other interface element that toggles it.
  • Use a popout to contain controls or information that doesn’t need to be shown immediately.
  • Use a popout to contain items that will most likely not fit into the current view.
  • Use a clearly labelled button to reveal the popout.
  • Use the appropriate aria-haspopup and role attributes for both the toggle button and containing items. Please refer to the MDN documentation on both role values and child role values.

Don’t #

  • Don’t hide information inside a popout that is imperative to using the current view.
  • Don’t obscure other controls that are important with the popout.
  • Don’t allow the popout to be obscured by other controls or the outer bounds of the current view.

Content guidelines #

If a popout contains actions, they should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Create user
Create User

Popout actions should always lead with a strong verb that encourages action. Use the {verb}+{noun} format except in the case of common actions like Save, Close or Cancel:

Edit row
Editing options

Avoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”:

Change theme
Change the theme

Avoid ending popout actions in punctuation:

Switch user
Switch user.

Avoud all caps for popout actions:

Rename
RENAME

Additional considerations #

  • The popout component is a containing component, only providing a way to reveal and hide controls by using a single button.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.