UNPKG

@dnb/eufemia

Version:

DNB Eufemia Design System UI Library

eufemia.dnb.no/uilib

dnbexperience/eufemia

104 lines (82 loc) • 7.96 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
--- title: 'Overview' description: 'All components and fragments grouped by practical usage categories.' version: 11.8.2 generatedAt: 2026-07-03T14:39:18.852Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Overview All components and fragments grouped by practical usage categories. ## Actions For things people click to do something, open choices, follow a link, or get help. - [Anchor (Text Link)](/uilib/components/anchor/): Use Anchor to take people to another page, section, or website. - [Button](/uilib/components/button/): Use Button when people need to start, confirm, or submit an action. - [HelpButton](/uilib/components/help-button/): Use HelpButton when a short explanation should be available next to a label or control. - [Menu](/uilib/components/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](/uilib/extensions/forms/) instead of composing forms from the base components below. - [Autocomplete](/uilib/components/autocomplete/): Use Autocomplete to help people find and choose from matching suggestions as they type. - [Checkbox](/uilib/components/checkbox/): Use Checkbox when people can turn one or more options on or off. - [DatePicker](/uilib/components/date-picker/): Use DatePicker when people need to choose one date or a date range. - [Dropdown](/uilib/components/dropdown/): Use Dropdown when people need to choose one option from a list. - [Filter](/uilib/components/filter/): Use Filter to help people narrow down a list or data set. - [FormLabel](/uilib/components/form-label/): Use FormLabel to name an input, control, or form-related field. - [Input](/uilib/components/input/): Use Input when people need to enter a short line of text. - [InputMasked](/uilib/components/input-masked/): Use InputMasked when people must enter text in a fixed format. - [Radio](/uilib/components/radio/): Use Radio when people must choose one option from a set. - [Slider](/uilib/components/slider/): Use Slider when people need to choose a value from a range. - [Switch](/uilib/components/switch/): Use Switch when people can turn one setting on or off. - [Textarea](/uilib/components/textarea/): Use Textarea when people need to write longer text over several lines. - [TextCounter](/uilib/components/fragments/text-counter/): Use TextCounter to show how many characters someone has typed or can still type. - [ToggleButton](/uilib/components/toggle-button/): Use ToggleButton when people can turn one or more visible choices on or off. - [Upload](/uilib/components/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](/uilib/components/breadcrumb/): Use Breadcrumb to show where someone is and let them move back up the path. - [InfinityScroller](/uilib/components/pagination/infinity-scroller/): Use InfinityScroller to load more content automatically as people scroll. - [Pagination](/uilib/components/pagination/): Use Pagination to split long content into pages or load more content as people move through it. - [SkipContent](/uilib/components/skip-content/): Use SkipContent to help keyboard users jump past large or repeated content. - [StepIndicator](/uilib/components/step-indicator/): Use StepIndicator to show progress through a process with several steps. - [Tabs](/uilib/components/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](/uilib/components/aria-live/): Use AriaLive to announce page changes to screen reader users. - [Badge](/uilib/components/badge/): Use Badge to highlight new, unread, or important information. - [Dialog](/uilib/components/dialog/): Use Dialog when people need to make a choice or read an important message before continuing. - [Drawer](/uilib/components/drawer/): Use Drawer to show extra content in a panel that slides in from the side. - [FormStatus (Messageboxes)](/uilib/components/form-status/): Use FormStatus to show validation errors, warnings, or messages near a form. - [GlobalError (404)](/uilib/components/global-error/): Use GlobalError to show a clear 404 or 500 error page. - [GlobalStatus](/uilib/components/global-status/): Use GlobalStatus to show important page-level messages or a summary of form errors. - [Modal](/uilib/components/modal/): Use Modal when people must focus on one task or message before returning to the page. - [Popover](/uilib/components/popover/): Use Popover to show a small floating panel connected to a trigger. - [ProgressIndicator](/uilib/components/progress-indicator/): Use ProgressIndicator to show that something is loading or processing. - [Skeleton](/uilib/components/skeleton/): Use Skeleton to show where content will appear while it is loading. - [Tooltip](/uilib/components/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](/uilib/components/accordion/): Use Accordion to let people open and close sections of related content. - [Avatar](/uilib/components/avatar/): Use Avatar to make a person, company, or profile easier to recognize. - [Card](/uilib/components/card/): Use Card to group related content in a clear, separated area. - [CountryFlag](/uilib/components/country-flag/): Use CountryFlag to show a country by its flag from an ISO country code. - [DateFormat](/uilib/components/date-format/): Use DateFormat to show dates in the correct DNB format. - [Heading (auto level)](/uilib/components/heading/): Use Heading to create accessible page headings with the correct level. - [Icon](/uilib/components/icon/): Use Icon to render and size an icon in line with Eufemia styling. - [InfoCard](/uilib/components/info-card/): Use InfoCard to show helpful information, tips, or guidance in a highlighted area. - [List](/uilib/components/list/): Use List to show rows of related content, with optional actions or navigation. - [ListFormat](/uilib/components/list-format/): Use ListFormat to show lists of values in the correct DNB format. - [Logo](/uilib/components/logo/): Use Logo to show the DNB logo with the correct SVG and styling. - [NumberFormat](/uilib/components/number-format/): Use NumberFormat to show numbers in the correct DNB format. - [Section](/uilib/components/section/): Use Section to give an area of the page a visual background or surface. - [Stat](/uilib/components/stat/): Use Stat to highlight an important number, label, or trend. - [Table](/uilib/components/table/): Use Table to show structured data in rows and columns. - [Tag](/uilib/components/tag/): Use Tag to show a small label, status, or selected value. - [TermDefinition](/uilib/components/term-definition/): Use TermDefinition to explain a word or phrase without leaving the page. - [Timeline](/uilib/components/timeline/): Use Timeline to show events or steps in chronological order. - [VisuallyHidden](/uilib/components/visually-hidden/): 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](/uilib/components/copy-on-click/): Use CopyOnClick when people should copy text by clicking it. - [HeightAnimation](/uilib/components/height-animation/): Use HeightAnimation to animate content as it opens or closes. - [PortalRoot](/uilib/components/portal-root/): Use PortalRoot to render floating content outside the normal page structure. - [ScrollView](/uilib/components/fragments/scroll-view/): Use ScrollView when content needs its own horizontal or vertical scrolling area.