PopoutReady 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 Example: Tabs in popout Example: With anchor Example: With checkboxes Theme: Light default Theme: Light high contrast Theme: Dark default Theme: Dark high contrast 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>
< 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 setTimeout ( ( ) => { button. loading = false group. addToast ( "Data exported" , { autoDismiss : 3000 } ) } , 2000 ) } ) } ) </ script>
< nord-stack id = " button-group" gap = " none" direction = " horizontal" > < nord-button variant = " primary" style = " --n-button-border-radius : var ( --n-border-radius) 0 0 var ( --n-border-radius) " > Button </ nord-button> < nord-button style = " --n-button-box-shadow : none; --n-button-border-radius : 0 var ( --n-border-radius) var ( --n-border-radius) 0" variant = " primary" aria-controls = " example" aria-haspopup = " true" > < nord-icon name = " interface-dropdown-small" label = " Open popout" > </ nord-icon> </ nord-button> </ nord-stack> < nord-popout id = " example" position = " block-end" anchor = " button-group" > < 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.