# nord-popout > Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page. ## 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values) and [child role values](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#associated_roles). > **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. - Don't use `always-floating` property for long lists or complex content that benefits from full-screen focus. --- ## 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): > **Do:** Create user > **Don't:** 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: > **Do:** Edit row > **Don't:** Editing options Avoid unnecessary words and articles in popout actions, such as “the”, “an” or “a”: > **Do:** Change theme > **Don't:** Change the theme Avoid ending popout actions in punctuation: > **Do:** Switch user > **Don't:** Switch user. Avoid all caps for popout actions: > **Do:** Rename > **Don't:** RENAME --- ## Additional considerations - The popout component is a containing component, only providing a way to reveal and hide controls by using a single button. - Consider using the `alwaysFloating` property for compact interactions like simple filters or dropdown menus. ## Examples ### Always Floating ```html Toggle popout
Popout content
 ``` ### Basic ```html Toggle popout
Popout content
 ``` ### Controlled ```html
Popout content
 ``` ### Custom Popout Filter ```html Species is Amphibian +1
Amphibian
Canine
Feline
Rodents
Clear selection
``` ### Position And Alignment ```html Default
Example content
 align="start"
Example content
 align="end"
Example content
 position="block-end"
Example content
 position="block-start"
Example content
 position="inline-start"
Example content
 position="inline-end"
Example content
 align="start" position="block-end"
Example content
 align="start" position="block-start"
Example content
 align="start" position="inline-start"
Example content
 align="start" position="inline-end"
Example content
 align="end" position="block-end"
Example content
 align="end" position="block-start"
Example content
 align="end" position="inline-start"
Example content
 align="end" position="inline-end"
Example content
 position="auto"
Example content
 align="start" position="auto"
Example content
 align="end" position="auto"
Example content
 ``` ### Position Auto ```html Toggle popout
Long vertical popout content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id tincidunt mauris. Sed tincidunt odio ut mattis convallis. Sed condimentum nibh ut nisi ultrices, eget fringilla nisl ullamcorper. Vivamus pretium magna maximus mauris congue, et convallis felis vehicula.
``` ### Position Left ```html Toggle popout
Popout content
 ``` ### Position Right ```html Toggle popout
Popout content
 ``` ### Position Top ```html Toggle popout
Popout content
 ``` ### Tabs In Popout ```html Export

Export data

 CSV Export data.csv

Data will be downloaded directly to your device.

 Excel Export data.xlsx

Data will be downloaded directly to your device.

 Select format to export ``` ### With Offset ```html side-offset align-offset
Larger gap from the toggle
Skidded along the edge
 ``` ### With Anchor ```html Toggle popout

Popout gets anchored here
Popout content
 ``` ### Inside Container Query ```html

This wrapper has container-type: inline-size which creates a new containing block and can break position: fixed popout positioning.

Toggle popout
Popout content inside a container query
``` ### Inside Nested Container Query ```html

Nested container queries — both wrappers have container-type: inline-size.

Outer container

Inner container

Toggle popout
Popout inside nested containers
``` ### With Checkboxes ```html Filter by status Clear selection ``` ### Position Examples ```html Below Above Below, aligned end
Below the trigger
Above the trigger
Aligned to the end edge
 ``` ## API Reference ### Properties - **id** (`string`, default: `''`) — The id for the active element to reference via aria-controls. - **anchor** (`string | undefined`) — Set an optional anchor element to align against, replacing the triggering element. - **always-floating** (`boolean`, default: `false`) — Set to true to always display the popout as a floating overlay, even on smaller viewports. - **controlled** (`boolean`, default: `false`) — Set to true when the consuming component owns the open state and drives the popout itself (e.g. via its own trigger @click and show()/hide()). The popout stays presentational — positioning, top layer, light dismiss and transitions all still work — but it does NOT attach its own click-to-toggle listener to the aria-controls trigger, avoiding a competing second toggle on the same click. - **open** (`boolean`, default: `false`) — Controls whether the component is open or not. - **align** (`'start' | 'end'`, default: `'start'`) — 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. - **position** (`'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'`, default: `'block-end'`) — 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. You can also set it to auto for automatic positioning depending on which side has the most space available. - **side-offset** (`number`, default: `8`) — Distance in pixels from the toggle (or anchor) along the main axis — the gap between the floating element and the side it opens against. Fed into Floating UI's offset middleware as mainAxis. Defaults to 8. - **align-offset** (`number`, default: `0`) — Offset in pixels along the alignment axis — slides the floating element toward the start or end of the toggle (or anchor). Fed into Floating UI's offset middleware as alignmentAxis. Defaults to 0. ### Events - **open** (`NordEvent`) — Dispatched when the popout is opened. - **close** (`NordEvent`) — Dispatched when the popout is closed. ### Slots - **(default)** — The popout content. ### Methods - **show** — `show() => Promise` — 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** — `hide(moveFocusToButton: boolean) => Promise` — 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. ### CSS Custom Properties - `--n-popout-background` (default: `var(--n-color-surface)`) — Background of the popout container. Set to transparent to suppress the popout's own surface (e.g. when a slotted element paints its own background). - `--n-popout-box-shadow` (default: `var(--n-box-shadow-popout)`) — Box-shadow of the popout container. Set to none to suppress the popout's own shadow.