Popout New Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.
Example: Basic Example: Position and alignment Example: Position left Example: Position right Example: Position top Theme: Nord light Theme: Nord dark 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>
Properties Property Attribute Description Type Default 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.
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.