Components by category#

Use Button when people need to start, confirm, or submit an action.

Use HelpButton when a short explanation should be available next to a label or control.

Use Menu when people need to choose from a small list of actions or links.

A branded Vipps wallet call-to-action button extension.

Use Autocomplete to help people find and choose from matching suggestions as they type.

Use Checkbox when people can turn one or more options on or off.

Use DatePicker when people need to choose one date or a date range.

Use Dropdown when people need to choose one option from a list.

Use Filter to help people narrow down a list or data set.

Use Input when people need to enter a short line of text.

Use InputMasked when people must enter text in a fixed format.

Use Radio when people must choose one option from a set.

Use Slider when people need to choose a value from a range.

Use Switch when people can turn one setting on or off.

Use Textarea when people need to write longer text over several lines.

Use TextCounter to show how many characters someone has typed or can still type.

Use ToggleButton when people can turn one or more visible choices on or off.

Use Upload when people need to choose or drag files into a page.

Use Breadcrumb to show where someone is and let them move back up the path.

Use InfinityScroller to load more content automatically as people scroll.

Use Pagination to split long content into pages or load more content as people move through it.

Use SidebarMenu for persistent navigation with sections and nested groups.

Use StepIndicator to show progress through a process with several steps.

Use Tabs to let people switch between related views on the same page.

Use Anchor to take people to another page, section, or website.

Use Badge to highlight new, unread, or important information.

Use Dialog when people need to make a choice or read an important message before continuing.

Use Drawer to show extra content in a panel that slides in from the side.

Use FormStatus to show validation errors, warnings, or messages near a form.

Use GlobalError to show a clear 404 or 500 error page.

Use GlobalStatus to show important page-level messages or a summary of form errors.

Use Modal when people must focus on one task or message before returning to the page.

Use Popover to show a small floating panel connected to a trigger.

Use ProgressIndicator to show that something is loading or processing.

Use Skeleton to show where content will appear while it is loading.

Use Tooltip to give a short hint or explanation for nearby content.

Use Accordion to let people open and close sections of related content.

Use Avatar to make a person, company, or profile easier to recognize.

Use Card to group related content in a clear, separated area.

Use CountryFlag to show a country by its flag from an ISO country code.

Use Icon to render and size an icon in line with Eufemia styling.

InfoCard is deprecated. Use Card.Info with composed children for information and tips.

Use List to show rows of related content, with optional actions or navigation.

Use Logo to show the DNB logo with the correct SVG and styling.

The Payment Card component is used to display payment card information in a standardized format.

Use Section to give an area of the page a visual background or surface.

Use Stat to highlight an important number, label, or trend.

Use Table to show structured data in rows and columns.

Use Tag to show a small label, status, or selected value.

Use TermDefinition to explain a word or phrase without leaving the page.

Use Timeline to show events or steps in chronological order.

Use DateFormat to show dates in the correct DNB format.

Use FormLabel to name an input, control, or form-related field.

Use Heading to create accessible page headings with the correct level.

Use ListFormat to show lists of values in the correct DNB format.

Use NumberFormat to show numbers in the correct DNB format.

Use AriaLive to announce page changes to screen reader users.

Use SkipContent to help keyboard users jump past large or repeated content.

Use VisuallyHidden to keep helpful text available to screen readers but hidden visually.

Use CopyOnClick when people should copy text by clicking it.

Use HeightAnimation to animate content as it opens or closes.

Use PortalRoot to render floating content outside the normal page structure.

Use ScrollView when content needs its own horizontal or vertical scrolling area.