UI components
The named building blocks of a screen.
ModalA box that appears in the middle of the screen, dims everything behind it, and needs an answer before you can carry on.
ToastA small message that pops up, says one thing, and leaves on its own.
DropdownA button that opens a short list of choices when you click it, then closes once you pick one.
TabsA row of labels that switch between different views in the same spot, like folder tabs.
SidebarA column down the side of the screen that holds the app's main navigation and stays put while you move around.
DrawerA panel that slides in from the edge of the screen on demand and slides away when you're done.
PopoverA small floating panel attached to a button, opened with a click, holding a few extra options or details.
TooltipA tiny label that appears when you hover over or focus something, explaining what it is.
AccordionA stack of headings that each expand to reveal content underneath and collapse to hide it.
CardA boxed-off rectangle that groups everything about one item, like a product, a post, or a person.
BadgeA small rounded label or number stuck to something to flag its status or count.
Skeleton screenGrey shapes that stand in for content while it loads, so the page has its final shape right away.
CarouselA row of slides you move through one at a time with arrows, dots, or a swipe.
BreadcrumbA trail of links at the top of a page showing where you are, like Home / Projects / Website redesign.
ToggleA little sliding switch for turning one setting on or off, which takes effect right away.