#Components

DNB Eufemia components are ready to use, styled and custom build HTML elements.

#Accordion

The Accordion component is a combination of an accessible button (header area) and a content container.

#Anchor (Text Link)

The Anchor, also knows as "Link" is used to navigate from one page to the next HTML page.

#AriaLive

AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.

#Autocomplete

The Autocomplete component, also know as a ComboBox, completes / suggests values during typing.

#Avatar

The Avatar component are identifiers that makes people and companies more scannable.

#Badge

The Badge component allows the user to focus on new or unread content or notifications.

#Breadcrumb

The Breadcrumb component is a bar for navigation showing current web path.

#Button

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.

#Card

Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.

#Checkbox

The Checkbox component is shown as a square box that is ticked (checked) when activated.

#DatePicker

The DatePicker component should be used whenever there is to enter a single date or a date period.

#Dialog

The Dialog component is a Modal variation that appears at the center of the screen.

#Drawer

The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page.

#Dropdown

The Dropdown component is a custom-made data selection component.

#FormLabel

The FormLabel component represents a caption for all sorts of HTML elements in a user interface.

#FormStatus (Messageboxes)

The FormStatus is a simple component meant for displaying the status of a form.

#GlobalError (404)

The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown.

#GlobalStatus

The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form.

#Heading

The Heading component is a helper to create automated semantic headings within a boundary of some rules.

#HeightAnimation

HeightAnimation is a helper component to animate from 0 to height:auto powered by CSS.

#HelpButton

A help button with custom semantics, helping screen readers determine the meaning of that button.

#Icon

The main Icon component is basically a wrapper for whatever icon you place within it.

#InfinityScroller

The InfinityScroller component is a mode of the Pagination component which loads content continuously as the user scrolls down the page.

#InfoCard

The InfoCard is used to give the user more information than we can give in a message box. It can also be used as to give useful tips.

#Input

The Input component is an umbrella component for all inputs which share the same style as the classic text input field.

#InputMasked

The InputMasked component uses the basic input component, but with some additional masking functionality.

#Logo

A ready to use DNB logo in SVG format.

#Modal

Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction.

#NumberFormat

A ready to use DNB number formatter.

#Pagination

The Pagination component supports both classical pagination and infinity scrolling.

#ProgressIndicator

The ProgressIndicator component is a waiting loader / spinner to show while other content is in progression.

#Radio

The Radio component is shown as a circle that is filled (checked) when activated.

#Section

The Section component is a visual helper.

#Skeleton

The Skeleton component is a visual building block helper.

#SkipContent

SkipContent gives users – using their keyboard for navigation – the option to skip over content which contains a large amount of interactive elements.

#Slider

The Slider component provides a visual indication of adjustable value.

#StepIndicator

The StepIndicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions.

#Switch

The Switch component (toggle) is a digital on/off switch.

#Table

Enhanced HTML Table element.

#Tabs

Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.

#Tag

The Tag component is a compact element for displaying discrete information.

#Textarea

The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.

#Timeline

The Timeline component shows events in chronological order and gives a great overview of the overall process.

#ToggleButton

The ToggleButton component should be used to toggle on or off a limited number of choices.

#Tooltip

The Tooltip component is primarily meant to enhance the UX for various and additional information.

#Upload

The Upload widget should be used in scenarios where the user has to upload files. Files can be uploaded by clicking button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed file formats etc.

#VisuallyHidden

VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.