--- title: Components by category description: All components and selected extensions grouped by purpose. version: 11.17.0 generatedAt: 2026-11-05T09:55:46.284Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Components by category ## Actions Buttons and controls for starting actions or opening choices. - [Button](/web/components/button/): Use Button when people need to start, confirm, or submit an action. - [Help button](/web/components/help-button/): Use HelpButton when a short explanation should be available next to a label or control. - [Menu](/web/components/menu/): Use Menu when people need to choose from a small list of actions or links. - [Vipps wallet button](/web/patterns-and-extensions/vipps-wallet-button/): A branded Vipps wallet call-to-action button extension. ## Inputs Controls for entering information, choosing options, and uploading files. **NB:** When creating application forms, use [Eufemia Forms](/web/forms/) instead of composing forms from the base components below. - [Autocomplete](/web/components/autocomplete/): Use Autocomplete to help people find and choose from matching suggestions as they type. - [Checkbox](/web/components/checkbox/): Use Checkbox when people can turn one or more options on or off. - [Date picker](/web/components/date-picker/): Use DatePicker when people need to choose one date or a date range. - [Dropdown](/web/components/dropdown/): Use Dropdown when people need to choose one option from a list. - [Filter](/web/components/filter/): Use Filter to help people narrow down a list or data set. - [Input](/web/components/input/): Use Input when people need to enter a short line of text. - [Masked input](/web/components/input-masked/): Use InputMasked when people must enter text in a fixed format. - [Radio button](/web/components/radio/): Use Radio when people must choose one option from a set. - [Slider](/web/components/slider/): Use Slider when people need to choose a value from a range. - [Switch](/web/components/switch/): Use Switch when people can turn one setting on or off. - [Text area](/web/components/textarea/): Use Textarea when people need to write longer text over several lines. - [Text counter](/web/components/fragments/text-counter/): Use TextCounter to show how many characters someone has typed or can still type. - [Toggle button](/web/components/toggle-button/): Use ToggleButton when people can turn one or more visible choices on or off. - [Upload](/web/components/upload/): Use Upload when people need to choose or drag files into a page. ## Navigation Components for moving between pages, sections, and steps. - [Breadcrumb](/web/components/breadcrumb/): Use Breadcrumb to show where someone is and let them move back up the path. - [Infinite scrolling](/web/components/pagination/infinity-scroller/): Use InfinityScroller to load more content automatically as people scroll. - [Pagination](/web/components/pagination/): Use Pagination to split long content into pages or load more content as people move through it. - [Sidebar menu](/web/patterns-and-extensions/sidebar-menu/): Use SidebarMenu for persistent navigation with sections and nested groups. - [Step indicator](/web/components/step-indicator/): Use StepIndicator to show progress through a process with several steps. - [Table of contents](/web/patterns-and-extensions/table-of-content/): >- - [Tabs](/web/components/tabs/): Use Tabs to let people switch between related views on the same page. - [Text link](/web/components/anchor/): Use Anchor to take people to another page, section, or website. ## Feedback and dialogs Messages, progress indicators, and dialogs that explain what is happening or needs attention. - [Badge](/web/components/badge/): Use Badge to highlight new, unread, or important information. - [Dialog](/web/components/dialog/): Use Dialog when people need to make a choice or read an important message before continuing. - [Drawer](/web/components/drawer/): Use Drawer to show extra content in a panel that slides in from the side. - [Form status](/web/components/form-status/): Use FormStatus to show validation errors, warnings, or messages near a form. - [Global error](/web/components/global-error/): Use GlobalError to show a clear 404 or 500 error page. - [Global status](/web/components/global-status/): Use GlobalStatus to show important page-level messages or a summary of form errors. - [Modal](/web/components/modal/): Use Modal when people must focus on one task or message before returning to the page. - [Popover](/web/components/popover/): Use Popover to show a small floating panel connected to a trigger. - [Progress indicator](/web/components/progress-indicator/): Use ProgressIndicator to show that something is loading or processing. - [Skeleton](/web/components/skeleton/): Use Skeleton to show where content will appear while it is loading. - [Tooltip](/web/components/tooltip/): Use Tooltip to give a short hint or explanation for nearby content. ## Content and layout Components for organizing and displaying information, images, icons, and tables. - [Accordion](/web/components/accordion/): Use Accordion to let people open and close sections of related content. - [AI components](/web/patterns-and-extensions/ai/): Building blocks for AI chat experiences, from the welcome screen with suggestions to the conversation, streamed markdown responses and the prompt input. - [Avatar](/web/components/avatar/): Use Avatar to make a person, company, or profile easier to recognize. - [Card](/web/components/card/): Use Card to group related content in a clear, separated area. - [Country flags](/web/components/country-flag/): Use CountryFlag to show a country by its flag from an ISO country code. - [Icons](/web/components/icon/): Use Icon to render and size an icon in line with Eufemia styling. - [Info card (deprecated)](/web/components/info-card/): InfoCard is deprecated. Use Card.Info with composed children for information and tips. - [List](/web/components/list/): Use List to show rows of related content, with optional actions or navigation. - [Logos](/web/components/logo/): Use Logo to show the DNB logo with the correct SVG and styling. - [Payment card](/web/patterns-and-extensions/payment-card/): >- - [Section](/web/components/section/): Use Section to give an area of the page a visual background or surface. - [Statistics](/web/components/stat/): Use Stat to highlight an important number, label, or trend. - [Table](/web/components/table/): Use Table to show structured data in rows and columns. - [Tag](/web/components/tag/): Use Tag to show a small label, status, or selected value. - [Term definition](/web/components/term-definition/): Use TermDefinition to explain a word or phrase without leaving the page. - [Timeline](/web/components/timeline/): Use Timeline to show events or steps in chronological order. ## Formatting and typography Components for formatting dates, numbers, lists, and text. - [Date format](/web/components/date-format/): Use DateFormat to show dates in the correct DNB format. - [Form label](/web/components/form-label/): Use FormLabel to name an input, control, or form-related field. - [Heading](/web/components/heading/): Use Heading to create accessible page headings with the correct level. - [List format](/web/components/list-format/): Use ListFormat to show lists of values in the correct DNB format. - [Number format](/web/components/number-format/): Use NumberFormat to show numbers in the correct DNB format. ## Accessibility Components for announcements, keyboard navigation, and screen reader content. - [ARIA live](/web/components/aria-live/): Use AriaLive to announce page changes to screen reader users. - [Skip content](/web/components/skip-content/): Use SkipContent to help keyboard users jump past large or repeated content. - [Visually hidden](/web/components/visually-hidden/): Use VisuallyHidden to keep helpful text available to screen readers but hidden visually. ## Utilities Components for scrolling, animation, copying, and rendering outside the page flow. - [Copy on click](/web/components/copy-on-click/): Use CopyOnClick when people should copy text by clicking it. - [Height animation](/web/components/height-animation/): Use HeightAnimation to animate content as it opens or closes. - [Portal root](/web/components/portal-root/): Use PortalRoot to render floating content outside the normal page structure. - [Scroll view](/web/components/scroll-view/): Use ScrollView when content needs its own horizontal or vertical scrolling area. - [Status indicators](/web/patterns-and-extensions/status-icon/): Use existing icons and semantic colors to show a status. - [Using patterns and extensions](/web/patterns-and-extensions/using-patterns-and-extensions/): >-