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-end">
  <div style="padding: var(--n-space-m)">Popout content</div>
</nord-popout>

<!-- Note: this example is purely visual, it does not include interactivity and proper accessibility -->

<nord-button-group>
  <nord-button aria-controls="popout" size="s">
    <nord-icon name="interface-filter" slot="start"></nord-icon>
    Species is <span class="n-color-accent-text">Amphibian +1</span>
  </nord-button>
  <nord-button size="s" square>
    <nord-icon name="interface-close-small" size="xxs" label="Remove filter"></nord-icon>
  </nord-button>
</nord-button-group>

<nord-popout id="popout">
  <div class="options n-padding-s">
    <nord-dropdown-group heading="Species">
      <nord-dropdown-item>
        <nord-stack direction="horizontal" gap="s" align-items="center">
          <div class="multi-select-indicator">
            <nord-icon name="interface-checked-small" size="xs"></nord-icon>
          </div>
          <span>Amphibian</span>
        </nord-stack>
      </nord-dropdown-item>
      <nord-dropdown-item>
        <nord-stack direction="horizontal" gap="s" align-items="center">
          <div class="multi-select-indicator"></div>
          <span>Canine</span>
        </nord-stack>
      </nord-dropdown-item>
      <nord-dropdown-item>
        <nord-stack direction="horizontal" gap="s" align-items="center">
          <div class="multi-select-indicator">
            <nord-icon name="interface-checked-small" size="xs"></nord-icon>
          </div>
          <span>Feline</span>
        </nord-stack>
      </nord-dropdown-item>
      <nord-dropdown-item>
        <nord-stack direction="horizontal" gap="s" align-items="center">
          <div class="multi-select-indicator"></div>
          <span>Rodents</span>
        </nord-stack>
      </nord-dropdown-item>
    </nord-dropdown-group>
  </div>

  <div class="n-padding-s n-border-bs">
    <nord-dropdown-item>Clear selection</nord-dropdown-item>
  </div>
</nord-popout>

<style>
  .options {
    min-inline-size: 250px;
    max-inline-size: 375px;
    max-block-size: 460px;
    overflow-y: auto;
  }

  @media (max-width: 35.9375em) {
    .options {
      max-block-size: 70vh;
      max-inline-size: none;
    }
  }

  .multi-select-indicator {
    background-color: var(--n-color-active);
    color: var(--n-color-text);
    border-radius: var(--n-border-radius-s);
    border: 1px solid var(--n-color-border-hover);
    inline-size: var(--n-space-m);
    block-size: var(--n-space-m);
    display: grid;
    place-items: center;
  }

  .multi-select-indicator:has(nord-icon) {
    background-color: var(--n-color-accent);
    color: var(--n-color-text-on-accent);
    border: 1px solid var(--n-color-accent);
  }

  nord-dropdown-item:hover {
    --n-dropdown-item-background-color: var(--n-color-active);
    --n-dropdown-item-color: var(--n-color-text);
  }
</style>

<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" 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" 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" 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 direction="horizontal" justify-content="space-between">
  <nord-button variant="primary" aria-controls="example" aria-haspopup="true">Toggle popout</nord-button>

  <p id="anchor">Popout gets anchored here</p>
</nord-stack>

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

<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" name="interface-filter"></nord-icon>
    Filter by status
    <nord-icon slot="end" 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
`id`	`id`	The id for the active element to reference via aria-controls.	`string`	`""`
`anchor`	`anchor`	Set an optional anchor element to align against, replacing the triggering element.	`string \| undefined`	`undefined`
`open`	`open`	Controls whether the component is open or not.	`boolean`	`false`
`align`	`align`	Set the alignment in relation to the toggle (or anchor) depending on the position. `start` will align it to the left of the toggle (or anchor). `end` will align it to the right of the toggle (or anchor). Setting the `position` to `inline-start` or `inline-end` will switch `start` and `end` to the top and bottom respectively.	`"start" \| "end"`	`"start"`
`position`	`position`	Set the position in relation to the toggle (or anchor). 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"`

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() => Promise<TransitionEvent \| void>`	N/A	Show the popout. A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled. If the popout is already open, the promise resolves immediately with `undefined`.
`hide(moveFocusToButton: boolean) => Promise<TransitionEvent \| void>`	`moveFocusToButton`: prevent focus returning to the target button. Default is true.	Hide the popout. Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled. If the popout is already closed, the promise resolves immediately with `undefined`.

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

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 #