A tooltip gives a short hint. A popover can hold more text, choices, or buttons.
Use a tooltip when a few words are enough. Use a popover when a person must read or do more without leaving the page. Open guideCompare UI patterns that are easy to mix up
Two patterns can look alike but do different jobs. Use these short rules to pick the right one.
Modal Dialog vs. Popover
A modal stops the page until the task is done. A popover stays beside its button and lets the page keep working.
Use a modal for one task that must finish first. Use a popover for extra details or a small action. Open guideA dropdown menu runs actions. A select picks from a fixed list. A combobox also lets you type or search.
Use a menu for actions. Use a select for a short fixed list. Use a combobox for a long or searchable list. Open guide Tabs vs. Toggle Group
Tabs switch between sections of content. A segmented control changes a small mode, filter, or value in the same view.
Use tabs for separate content sections. Use a segmented control for a few short choices that change the same content. Open guideAn accordion opens sections in a page and may keep several open. Tabs show one section at a time in one shared space.
Use an accordion for questions or sections people may read together. Use tabs for a few separate views when only one matters at a time. Open guide Toast vs. macOS Alert
A toast is a short message that does not stop the task. An alert stays or interrupts because it must not be missed.
Use a toast to confirm a finished action. Use an alert for a failure, danger, or choice that needs attention now. Open guide Tooltip vs. Hover Card
A tooltip gives a short label or hint. A hover card shows a richer preview of a person, item, or link.
Use a tooltip when a few words are enough. Use a hover card when a preview can save a trip to another page. It must also work by keyboard and touch. Open guideA context menu shows actions for the item you click or press. A dropdown opens from a visible button with a clear purpose.
Use a context menu as an extra shortcut, not the only path. Use a dropdown when people need to see where the menu opens. Open guideA carousel shows separate slides with controls. A marquee keeps a line of content moving.
Use a carousel when each item needs time and controls. Use a marquee only for unimportant decoration that can pause and stop moving when asked. Open guide Lightbox vs. Modal Dialog
A lightbox is a modal made for pictures or video. A regular modal holds a choice, form, or short task.
Use a lightbox to enlarge pictures or video. Use a modal when the main job is to act or decide. Open guideMasonry packs cards of different heights into columns. A bento grid uses planned card sizes to show what matters most.
Use masonry for many separate items with different heights. Use a bento grid for a small set whose size shows importance. Open guideA sidebar stays in the page layout. A drawer slides in for a short time and may cover or push the page.
Use a sidebar for tools or links people use often when there is room. Use a drawer for less common tasks or small screens, and make it easy to close. Open guideA three-line button opens navigation. A three-dot button opens more actions for a nearby item.
Use three lines for hidden navigation, mostly on small screens. Use three dots when extra item actions do not fit, and name the button “More actions.” Open guideEasing follows a set timing curve. A spring moves like a real spring and stops on its own.
Use easing for fades, color changes, and timed steps. Use a spring for objects that move or follow a drag. Open guideA stepper changes a number by set steps. A slider chooses a place along a range.
Use a stepper for small, exact changes. Use a slider when rough position matters more than typing an exact number. Always show the value and support the keyboard. Open guideA sheet belongs to one window and holds a short task. An alert shows a short message or choice that needs attention now.
Use a sheet for settings, saving, or a short form tied to one document. Use an alert for a warning, failure, or one-step check. Open guideAn empty state means there is no content. A skeleton means the content is still loading and its shape is known.
Use an empty state to explain why nothing is there and what to do next. Use a skeleton for a short load when you know the layout. Open guideA toolbar puts common actions inside a window. The menu bar keeps the app's full set of commands at the top of the screen.
Put common document or selection actions in the toolbar. Keep all commands, keyboard shortcuts, and less common actions in the menu bar. Open guide