We’re hiring frontend developers! View open positions.

PopoutReady

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

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>

<nord-button type="button" aria-controls="example1" aria-haspopup="true" expand>Default</nord-button>
<nord-popout id="example1">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example2" aria-haspopup="true" expand>align="start"</nord-button>
<nord-popout id="example2" align="start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example3" aria-haspopup="true" expand>align="end"</nord-button>
<nord-popout id="example3" align="end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example4" aria-haspopup="true" expand>position="block-end"</nord-button>
<nord-popout id="example4" position="block-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example5" aria-haspopup="true" expand>position="block-start"</nord-button>
<nord-popout id="example5" position="block-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example6" aria-haspopup="true" expand>position="inline-start"</nord-button>
<nord-popout id="example6" position="inline-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example7" aria-haspopup="true" expand>position="inline-end"</nord-button>
<nord-popout id="example7" position="inline-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example8" aria-haspopup="true" expand>
  align="start" position="block-end"
</nord-button>
<nord-popout id="example8" align="start" position="block-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example9" aria-haspopup="true" expand>
  align="start" position="block-start"
</nord-button>
<nord-popout id="example9" align="start" position="block-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example10" aria-haspopup="true" expand>
  align="start" position="inline-start"
</nord-button>
<nord-popout id="example10" align="start" position="inline-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example11" aria-haspopup="true" expand>
  align="start" position="inline-end"
</nord-button>
<nord-popout id="example11" align="start" position="inline-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example12" aria-haspopup="true" expand>
  align="end" position="block-end"
</nord-button>
<nord-popout id="example12" align="end" position="block-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example13" aria-haspopup="true" expand>
  align="end" position="block-start"
</nord-button>
<nord-popout id="example13" align="end" position="block-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example14" aria-haspopup="true" expand>
  align="end" position="inline-start"
</nord-button>
<nord-popout id="example14" align="end" position="inline-start">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<nord-button type="button" aria-controls="example15" aria-haspopup="true" expand>
  align="end" position="inline-end"
</nord-button>
<nord-popout id="example15" align="end" position="inline-end">
  <div style="padding: var(--n-space-m)">Example content</div>
</nord-popout>
<style>
  body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30ch, max-content));
    justify-content: center;
    gap: var(--n-space-m);
  }
</style>

<nord-stack direction="horizontal" justify-content="center" style="margin-bottom: var(--n-space-s)">
  <nord-button variant="primary" aria-controls="example" aria-haspopup="true">Toggle popout</nord-button>
</nord-stack>

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

<nord-stack direction="horizontal" justify-content="center" style="margin-bottom: var(--n-space-s)">
  <nord-button variant="primary" aria-controls="example" aria-haspopup="true">Toggle popout</nord-button>
</nord-stack>

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

<nord-stack style="margin-top: var(--n-space-xxl)" 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>

<nord-button variant="primary" aria-controls="example" aria-haspopup="true">
  Export <nord-icon slot="end" size="s" name="interface-download"></nord-icon>
</nord-button>

<nord-popout id="example">
  <nord-stack
    style="padding: var(--n-space-m) var(--n-space-m) var(--n-space-s)"
    direction="horizontal"
    align-items="center"
  >
    <nord-stack direction="horizontal" align-items="center" gap="s">
      <h3 class="n-font-size-l n-font-weight-active">Export data</h3>
    </nord-stack>
    <nord-icon name="interface-help" aria-describedby="tooltip" style="cursor: help" label="Help"></nord-icon>
  </nord-stack>
  <nord-tab-group label="Download options" padding="m">
    <nord-tab slot="tab">CSV</nord-tab>
    <nord-tab-panel>
      <nord-button class="export">
        Export data.csv <nord-icon slot="end" size="s" name="interface-download"></nord-icon>
      </nord-button>
      <p class="n-typescale-s n-margin-b-s">Data will be downloaded directly to your device.</p>
    </nord-tab-panel>
    <nord-tab slot="tab">Excel</nord-tab>
    <nord-tab-panel>
      <nord-button class="export">
        Export data.xlsx <nord-icon slot="end" size="s" name="interface-download"></nord-icon>
      </nord-button>
      <p class="n-typescale-s n-margin-b-s">Data will be downloaded directly to your device.</p>
    </nord-tab-panel>
  </nord-tab-group>
</nord-popout>

<nord-tooltip id="tooltip">Select format to export</nord-tooltip>

<nord-toast-group></nord-toast-group>

<script>
  const buttons = document.querySelectorAll(".export")
  const group = document.querySelector("nord-toast-group")

  group.addEventListener("dismiss", e => e.target.remove())

  buttons.forEach(button => {
    button.addEventListener("click", () => {
      if (button.loading) {
        return
      }

      group.addToast("Exporting data…", { autoDismiss: 3000 })
      button.loading = true

      // Timeout exists for demo purposes to mimic server response time
      setTimeout(() => {
        button.loading = false
        group.addToast("Data exported", { autoDismiss: 3000 })
      }, 2000)
    })
  })
</script>

<nord-stack style="margin-bottom: var(--n-space-xl)" direction="horizontal" justify-content="center">
  <nord-button aria-controls="example" aria-haspopup="true">
    <nord-icon slot="start" size="s" name="interface-filter"></nord-icon>
    Filter by status
    <nord-icon slot="end" size="s" name="interface-dropdown-small"></nord-icon>
  </nord-button>
</nord-stack>

<nord-popout id="example" position="block-start">
  <nord-stack gap="m" style="padding: var(--n-space-m); min-inline-size: 200px">
    <nord-checkbox name="pending" label="Pending"></nord-checkbox>
    <nord-checkbox name="successful" label="Successful"></nord-checkbox>
    <nord-checkbox name="failed" label="Failed"></nord-checkbox>
    <nord-checkbox name="blocked" label="Blocked"></nord-checkbox>
  </nord-stack>
  <nord-divider></nord-divider>
  <nord-stack gap="m" style="padding: var(--n-space-s)">
    <nord-button expand variant="plain" style="--n-button-padding-x: var(--n-space-s); --n-button-text-align: start">
      Clear selection
    </nord-button>
  </nord-stack>
</nord-popout>

<script>
  const checkboxes = document.querySelectorAll("nord-checkbox")
  const clearButton = document.querySelector("nord-popout nord-button")

  checkboxes.forEach(checkbox => {
    checkbox.addEventListener("input", () => {
      checkbox.toggleAttribute("checked")
    })
  })

  clearButton.addEventListener("click", event => {
    checkboxes.forEach(checkbox => checkbox.removeAttribute("checked"))
  })
</script>

Properties

Property	Attribute	Description	Type	Default
`open`	`open`	Controls whether the popout is open or not.	`boolean`	`false`
`align`	`align`	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"`
`position`	`position`	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"`
`id`	`id`	The id for the active element to reference via aria-controls.	`string`	`""`

Events

Event	Description	Type
`open`	Dispatched when the popout is opened.	`NordEvent`
`close`	Dispatched when the popout is closed.	`NordEvent`

Slots

Slot name	Description
Default slot	The popout content.

Methods

Method name	Parameters	Description
`show() => void`	N/A	Show the popout, moving focus to the calendar inside.
`hide(moveFocusToButton: boolean) => void`	`moveFocusToButton`: 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.

Avoid 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.

PopoutReady

Properties

Events

Slots

Methods

Usage #

Do #

Don’t #

Content guidelines #

Additional considerations #

Integration

Localization

Troubleshooting

Was this page helpful?