Clickto expand
Web Components5.2.4
Presentational user interface components with encapsulated styles that can be used with any JavaScript framework. Browse by category, or use the filter in the header.
Action
- <nord-button>
Button
Buttons are used for interface actions, with a primary style for the main call-to-action.
- <nord-button-group>
Button Group
Brings together button controls that are of a similar nature, such as text formatting controls.
- <nord-command-menu>
Command Menu
Navigate and use an app from the keyboard, helping people become power users.
- <nord-message>
Message
Represent a specific item within a collection, such as notifications, tasks or conversations.
- <nord-segmented-control>
Segmented Control
A compact set of mutually exclusive options shown side by side.
Data input
- <nord-autocomplete>
New Alpha Light DOM Autocomplete
A free-text input with suggestions, where the text the user types is itself the value and the options are completion aids.
- <nord-calendar>
Calendar
Lets users pick a date from a month grid, with optional minimum and maximum bounds.
- <nord-checkbox>
Checkbox
Allows the user to choose one or more options from a limited set of options.
- <nord-combobox>
New Alpha Light DOM Combobox
Lets users choose one or several options from a list by typing to filter, then picking with the keyboard or pointer.
- <nord-date-picker>
Date Picker
Lets users enter a date by typing it or by choosing it from a calendar.
- <nord-date-range-picker>
New Alpha Light DOM Date Range Picker
Lets users choose a start and end date as a single range, from a list of presets or a range calendar.
- <nord-field>
New Alpha Light DOM Field
A composable wrapper for laying out a form control with a label, helper text, and error message.
- <nord-filter-add-button>
Light DOM Filter Add Button
Filter Add Button opens a popout of available filters and emits the chosen one so your app can add it to the bar. Pass a flat list of options, or group them under headings; selecting one fires a select event with the option's id and closes the popout. Like the other filter primitives it is intent-only: it does not track which filters are active. Your app owns the active filters and decides what to do on select (typically render a new Filter Field). Mirrors the Provet Cloud filter add button.
- <nord-filter-date>
Light DOM Filter Date
Filter Date is a self-contained single-date **filter**: a chip that opens a popout containing an inline Calendar. It is the single-date counterpart to Filter Date Range and renders the shared filter chip via Filter Field. Composition-first: it emits change/clear/remove and leaves the active filters and any URL/query state to your app.
- <nord-filter-date-range>
Light DOM Filter Date Range
A date-range filter control — a chip trigger that opens a popout with presets and a calendar. It owns its selection, the date-range counterpart to Filter Dropdown.
- <nord-filter-dropdown>
Light DOM Filter Dropdown
A full-featured filter control with a built-in option list — a chip trigger that opens a popout of selectable options. It owns its selection, unlike the composition-first Filter Field.
- <nord-filter-field>
Light DOM Filter Field
Filter Field is the presentation-only filter **chip**: a joined pill showing a leading icon, the filter's label, the active selection summary (value) and a clear or remove affordance, dashed while inactive. It is the shared chip used across the filter family and the building block for custom filters. It owns no popout and tracks no value — drop it into a popout-owning control as its slot="trigger" (the host opens/positions the popout and sets aria-controls/aria-haspopup/aria-expanded on this element). Show the active selection with value, reset it in response to clear, and remove the whole field in response to remove. Your app owns the active filters and any URL/query state.
- <nord-filter-input>
Light DOM Filter Input
Filter Input is a compact search/text field for filtering a collection. It replaces the small ad-hoc search inputs that sit in toolbars and table headers. By default it renders inline as a small search field with a leading search icon; set mode="chip" to collapse it behind a chip button that opens the input in a popout, which is handy in a crowded filter toolbar. It emits intent only: input as the user types and change when the value is committed. Your app owns the active filters and any URL/query state — read the value from the event target (or bind value) and filter accordingly. It is a control only, like Combobox: compose it inside a Field for a visible label, or set label for an accessible name when used standalone.
- <nord-filter-reset-button>
Light DOM Filter Reset Button
Filter Reset Button clears every active filter at once. It is a thin, intent-only control: it renders a plain button and dispatches a reset event when pressed. Your app owns the active filters and is responsible for clearing them (and any URL/query state) in the handler — the button holds no state of its own. Disable it while there is nothing to reset by binding disabled to whether any filter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud filter reset button.
- <nord-input>
Input
Used to allow users to provide text input when the expected input is short.
- <nord-input-group>
New Alpha Light DOM Input Group
Combines one Nord text control with contextual add-ons inside a shared field surface.
- <nord-number-field>
New Alpha Light DOM Number Field
A control for entering a numeric value, with stepper buttons, optional drag-to-scrub, and locale-aware formatting.
- <nord-otp-field>
New Alpha Light DOM Otp Field
A segmented one-time-code input that renders individual character cells with autofill and validation support.
- <nord-radio>
Radio
Allows the user to choose only one option from a predefined set of mutually exclusive options.
- <nord-range>
Range
Lets users specify a numeric value using a slider between a minimum and maximum.
- <nord-select>
Select
Lets users choose one option from an options menu.
- <nord-textarea>
Textarea
Allows users to write text over multiple rows, used when the expected input is long.
- <nord-time-picker>
New Alpha Time Picker
A native time field paired with a dropdown of selectable times at a configurable interval.
- <nord-toggle>
Toggle
A switch control for turning a single setting on or off.
- <nord-fieldset>
Deprecated Fieldset
Groups related form controls under a legend. Deprecated in favour of the composable Field family.
List & table
Content & media
- <nord-avatar>
Avatar
A visual representation of a user or entity, shown as an image, initials, or icon.
- <nord-icon>
Icon
Renders a Nord icon by name, sized and coloured to match surrounding text.
- <nord-kbd>
New Alpha Light DOM Kbd
Displays a keyboard key, such as a shortcut or a key the user should press.
- <nord-qrcode>
Qrcode
Renders a scannable QR code for a URL or text value.
- <nord-tag>
Tag
A compact label for a keyword, attribute, or selectable option.
- <nord-timestamp>
New Alpha Light DOM Timestamp
Presents an instant as localized, system, relative, or automatically selected date-time text.
- <nord-truncate>
New Truncate
Clamps overflowing text to one or more lines, revealing the full value in a tooltip.
- <nord-visually-hidden>
Visually Hidden
Hides content visually while keeping it available to assistive technology.
Feedback & status
- <nord-badge>
Badge
Inform users of the status of an object or of an action that's been taken.
- <nord-banner>
Banner
Inform users about important changes or conditions in the interface in a prominent way.
- <nord-empty-state>
Empty State
Communicate that there's no content to display, and guide users toward a next step.
- <nord-meter>
New Alpha Light DOM Meter
A graphical display of a numeric value within a known range, such as disk usage, a battery level or a score.
- <nord-notification>
Notification
A persistent, dismissible message about an event that needs attention.
- <nord-progress>
Progress
Display a circular pie-chart style progress indicator with a customizable size and color.
- <nord-progress-bar>
Progress Bar
Visually represent the completion of a task or process along a horizontal bar.
- <nord-skeleton>
Skeleton
Provide a low fidelity representation of content before it appears in a view.
- <nord-spinner>
Spinner
Indicate to users that their action is being processed.
- <nord-toast>
Toast
A brief, self-dismissing message confirming an action or reporting status.
Navigation
- <nord-navigation>
Navigation
A vertical sidebar of links and groups for moving around an app.
- <nord-outline>
New Alpha Outline
An in-page table of contents that lists a page's headings and highlights the section currently in view.
- <nord-pagination>
New Alpha Light DOM Pagination
Composition-first navigation primitives for paging through a collection — your app owns the state, Nord owns the semantics, layout and styling.
- <nord-tab>
Tab
Toggle between related panels of content on the same page.
Overlay
- <nord-dropdown>
Dropdown
A menu of actions or options revealed from a toggle.
- <nord-modal>
Updated Modal
Display content that temporarily blocks interaction with the main view of an application.
- <nord-popout>
Popout
A small overlay that opens on demand to surface additional content and actions.
- <nord-tooltip>
Tooltip
A floating container that shows additional information for the currently focused element.
Layout
- <nord-aside>
New Aside
A right-side rail and drawer layout for surfacing secondary content alongside the main view.
- <nord-divider>
Divider
Dividers separate and distinguish sections of content or groups of menu items.
- <nord-drawer>
Updated Drawer
Display context-sensitive actions and information without blocking the main task.
- <nord-footer>
Footer
The footer is a block of designated space for information or actions positioned below the main content.
- <nord-header>
Header
The header is a block of designated space for labelling the current context and providing primary actions.
- <nord-layout>
Layout
Layout is the application shell that arranges the navigation sidebar, header, main content, footer and drawer.
- <nord-overflow-list>
New Alpha Light DOM Overflow List
Keeps an ordered row within its available inline size and reports items that move into overflow.
- <nord-resizable>
New Alpha Light DOM Resizable
Coordinates accessible, constrained panel sizes along a horizontal or vertical axis.
- <nord-scroll-area>
New Alpha Scroll Area
A scroll container with custom, consistently-styled scrollbars and optional edge fades.
- <nord-stack>
Stack
Stack manages layout of immediate children along the vertical or horizontal axis with optional spacing.
- <nord-top-bar>
Top Bar
Top bar is a header component, always visible at the top of the interface, for search and contextual menus.
Container
- <nord-accordion>
New Alpha Light DOM Accordion
A vertically stacked set of collapsible sections, each with a header that toggles its content.
- <nord-card>
Updated Card
Cards are shadowed surfaces that display content and actions on a single topic.
- <nord-collapsible>
New Alpha Light DOM Collapsible
A single section of content that expands and collapses behind a trigger.