Common UI Types
Accordion
UI to collapse/expand vertical stack list of interactive items
Source: storybook.js.org/showcase/tag/accordion
Alert
UI to prompt short message & require user input/dismiss
Source: storybook.js.org/showcase/tag/alert
Avatar
UI img to rep user/entity
Source: storybook.js.org/showcase/tag/avatar
Badge
compact UI to label status/metadata
Source: storybook.js.org/showcase/tag/badge
Banner
UI to promo content to inform/annoy user about news/change/donations/ads
Source: storybook.js.org/showcase/tag/banner
Breadcrumb
UI to show link trail to current page in Routing hierachy
Source: storybook.js.org/showcase/tag/breadcrumb
Calendar
UI to show/select date
Source: storybook.js.org/showcase/tag/calendar
Card
UI to group related content/action
Source: storybook.js.org/showcase/tag/card
Carousel
UI to slideshow/cycle image/text with controls, optional autoplay
Source: storybook.js.org/showcase/tag/carousel
Chat
UI to display chat log between users
Source: storybook.js.org/showcase/tag/chat
Checkbox
UI to input user toggle as tickbox
Source: storybook.js.org/showcase/tag/checkbox
File Picker
UI input file, to replace default browser prompt window, as drag-drop, etc
Source: storybook.js.org/showcase/tag/file
Hero
large Banner to attract user attention & upsell content (ie testimonials/highlights)
Source: storybook.js.org/showcase/tag/hero
Icon
small UI symbol to rep concept/content/action. sh!t examples
Lightbox
Modal variant (for video playback) with zoom to bring content to focus & dim background
Modal
UI to overlay fullscreen & obscure content, to focus attention user attention & req dismiss
Sources: storybook.js.org/showcase/tag/modal storybook.js.org/showcase/tag/icon
Pagination
UI to nav multiple pages
Source: storybook.js.org/showcase/tag/pagination
Spinner
UI to animate ongoing process/loading
Source: storybook.js.org/showcase/tag/spinner
Toast
UI to display short text message over content to inform user of update/change
Source: storybook.js.org/showcase/tag/toast
Toggle
UI button to toggle on/off
Source: storybook.js.org/showcase/tag/toggle
Tooltip
UI to appear on hover/active as extra info for element
Source: storybook.js.org/showcase/tag/tooltip