UI Components

Atomic

Badge - a small icon to the top-right of the element
Chip - tiny text component with background or border

• Tag - same as Chip

Loader

• Spinner - specific Loader type, which appears to be rotating circle

Tooltip - helping text, which shows up, when mouse is over

Form

Dropdown - select element
Switch - like switch for light in the room

• Toggle - a moving part of switch. toggle can also be used interchangeably with switch

Slider - component allowing to choose a value from a range. this is usually a line

• CSS example

Date Picker - element allowing to pick a date

• Range Picker - element allowing to pick both start and end date

File Picker - component for selecting and uploading file from computer
Stepper - step indication used in multi-step form
Progress Bar

Page Layout

Header
Card
Sidebar - always visible section aside from the main content
Footer
Modal - element, which appears as an overlay on top of page

• Pop-up - another naming
• Dialog - Modal, which requests user's choice
• CSS example

Drawer - combination of Sidebar and Modal. it appears at one side of screen, and main content meanwhile is darken

Other

Backdrop - darken background layer. it can listen for a click if needed

• is often used with full-screen loader, modal

Toast - notification in the corner or near the edge of screen

• Snackbar - another naming

Alert - short message that attracts the user's attention without interrupting the user's task

• can be wrapped with Toast

Breadcrumbs - structure of website dive
Hamburger - button with three parallel lines inside, indicating navigation menu
Menu - list of choices

• Context Menu - menu on mouse right-click

Accordion - collapsible content. header is always visible
Tabs
Masonry - feed with several columns and elements of different height
Pagination
Carousel - a set of images or cards which are shown to user gradually. e.g. one by one

• how to implement

Carousel

Infinite, One By One

1. all items should be put into the container horizontally. one item is visible, others overflow hiddenly
2. clone of the first item should be put to the end, and clone of the last item should be put to the beginning
3. sliding can be animated with transform: translateX()
4. once user reaches a clone, and slide animation is finished, carousel should instantly (without animation) reset to "real" corresponding item
   this is the main trick for infinity illusion
5. to avoid bugs, previous & next buttons as well as gestures should always be disabled until slide animation is finished

Infinite, Floating

1. all items should be put into the container horizontally
2. infinite animation should be applied. list will flow from right to left, then jump to the starting point and again will flow from right to left
3. infinity simulation: items should be duplicated + container width is set to 200% + justify-content: space-around
   now jump to the starting state will be unnoticed for the user