Overview#

Actions#

For things people click to do something, open choices, follow a link, or get help.

• Anchor (Text Link)

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

• Button

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

• HelpButton

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

• Menu

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

Input#

For entering information, choosing options, uploading files, or changing values.

NB: When creating application forms, use Eufemia Forms instead of composing forms from the base components below.

• Autocomplete

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

• Checkbox

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

• DatePicker

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

• Dropdown

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

• Filter

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

• FormLabel

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

• Input

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

• InputMasked

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

• Radio

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

• Slider

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

• Switch

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

• Textarea

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

• TextCounter

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

• ToggleButton

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

• Upload

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

Navigation#

For helping people move between pages, jump to content, or continue through steps.

• Breadcrumb

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

• InfinityScroller

  Use InfinityScroller to load more content automatically as people scroll.

• Pagination

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

• SkipContent

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

• StepIndicator

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

• Tabs

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

Feedback#

For messages and panels that tell people what happened, what is happening, or what needs attention.

• AriaLive

  Use AriaLive to announce page changes to screen reader users.

• Badge

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

• Dialog

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

• Drawer

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

• FormStatus (Messageboxes)

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

• GlobalError (404)

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

• GlobalStatus

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

• Modal

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

• ProgressIndicator

  Use ProgressIndicator to show that something is loading or processing.

• Skeleton

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

• Tooltip

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

Content#

For showing information, such as text, numbers, tables, icons, lists, and cards.

• Accordion

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

• Avatar

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

• Card

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

• CountryFlag

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

• DateFormat

  Use DateFormat to show dates in the correct DNB format.

• Heading (auto level)

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

• Icon

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

• InfoCard

  Use InfoCard to show helpful information, tips, or guidance in a highlighted area.

• List

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

• ListFormat

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

• Logo

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

• NumberFormat

  Use NumberFormat to show numbers in the correct DNB format.

• Section

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

• Stat

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

• Table

  Use Table to show structured data in rows and columns.

• Tag

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

• TermDefinition

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

• Timeline

  Use Timeline to show events or steps in chronological order.

• VisuallyHidden

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

Other#

For special page behavior that does not fit the groups above.

• CopyOnClick

  Use CopyOnClick when people should copy text by clicking it.

• HeightAnimation

  Use HeightAnimation to animate content as it opens or closes.

• PortalRoot

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

• ScrollView

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