UI/UX Terminology
Radio ☉
Radio buttons typically occur in groups; they’re round and are filled in with a black circle when on. They’re called radio buttons because they act like the buttons on a car radio.
Inside Macintosh Volume I, p.66, 1985
Mid-century car radios had a row of mechanical buttons for preset stations. Press one and it stays down while popping the others back up — this “press A, release B” mutual exclusion is exactly where the name Radio Button comes from.
When GUI designers brought this interaction to the screen, it became a classic form control: it restricts the user to picking exactly one option from a group. Click an option, and the previously selected one is deselected automatically.
1. How much is the shirt?
Modal/Modalless Dialog 💬
A mode is a part of an application that the user has to formally enter and leave, and that restricts the operations that can be performed while it’s in effect.
Inside Macintosh Volume I, p.28, 1985
A modal dialog box is one that the user must explicitly dismiss before doing anything else… the main use of a modal dialog box is when it’s important for the user to complete an operation before doing anything else.
A modeless dialog box allows the user to perform other operations without dismissing the dialog box.
Inside Macintosh Volume I, p.67-68, 1985
In human-computer interaction there’s a common kind of component: it appears on top of the main page, and the user must finish interacting with it before returning to the page. A nice design touch is to blur the rest of the screen, pulling the user’s attention toward it.
The industry usually calls this component a Modal. Going by the wording in Inside Macintosh Volume I, the noun Mode actually feels like the better fit; Modal works better as a prefix for components, e.g. Modal Dialog, Modal Searchbox, and so on.
Dialog is literal: a “conversation” between the computer and the user. Combined with Modal, you can design components that deliberately interrupt the user:
- Warnings before overwriting/deleting a file
- Login/signup flows
Breadcrumbs 🍞
The Grimm brothers’ Hänsel und Gretel tells this story:
A poor couple, driven by famine, twice abandon their children Hänsel and Gretel in the forest. The first time, Hänsel drops pebbles along the way, and the siblings follow their glint back home. The second time he drops breadcrumbs, but birds eat them all; the two get lost and stumble into a witch’s gingerbread house…
The breadcrumb component borrows exactly this metaphor, helping users see the path they took and navigate back up a level.
Common places you’ll see it:
- File managers, e.g. Windows Explorer.exe and macOS Finder.app
- The archive page of this site, where I use it for year/month navigation
- VSCode has breadcrumbs too, letting you jump quickly between folders, files, and symbols
Hamburger 🍔
Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. —— Norm Cox
The most familiar one of all. The hamburger. Iconic. Needs no introduction 👍
The three-line icon is called the “hamburger menu” because it looks like a burger: two buns with a patty in between. Norm Cox designed it in 1981 for the Xerox Star operating system. Windows used it the following year, then dropped it. But with the rise of mobile, the hamburger became a regular sight again on Android and iOS.
Where to find it:
- Visit vluv.space on mobile and grab your little 🍔 in the top-right corner
- The TOC on this site uses a burger component too
Toast & Snackbar 🍞
Toast, as in a slice of toasted bread. The inspiration comes from the toaster: when the bread is done, it pops up out of the machine. Snackbar literally means a snack counter, again hinting that the component is quick and lightweight.
Both components are modalless: they don’t interrupt the user, and they disappear on their own after a while. What sets Snackbar apart is that it usually pairs “message + action”, where the action can be retry, undo, and so on.
Sonner 🔔
The way I came up with Sonner is I looked up French words related to notifications. Sonner, which means “to ring” was one of them… While I’m sacrificing discoverability and clarity, it feels elegant to me.
Emil Kowalski, Building a toast component, 2024
Sonner is a popular React toast library, released in 2023 by design engineer Emil Kowalski. Unlike plainly functional names such as react-toast or react-snackbar, the author picked something more elegant: the French verb sonner, “to ring”.
Just as a doorbell rings to announce a visitor, a toast “rings” to tell the user something happened, without getting in the way. The name sacrifices some discoverability (developers may not find it on a first search), but it wins on simple elegance.
Today Sonner is one of the most popular toast libraries in the React ecosystem: over 8 million npm downloads a week, the default toast component of shadcn/ui, and in use by products like Cursor, X, and Vercel.
Carousel 🎠
The word Carousel comes from the French “carrousel”[1], usually meaning the large, ornately decorated merry-go-round at an amusement park. By extension it also names rotating machinery like the baggage/luggage carousel at airports.
On screen, the Carousel component behaves like a merry-go-round: it spins in one direction, looping forever. The most annoying use is rotating ad banners, though a quick scroll gets past them; the worst offender is still the popup (let’s file that under Modal Dialog).
A few use cases where it fits well:
- Showing different views of a product
- Photography galleries
Accordion 🪗
The Accordion component lets users expand or collapse content sections, like the bellows of an accordion stretching and squeezing.
One of my favorite components. When a piece of content covers many topics, it’s a great fit, FAQs for example. The page stays tidy, and users can pick just the parts they care about.
Introduction
Welcome to the introduction section. Here you can learn about the basics of UI components.Design Patterns
Design patterns help us create consistent and intuitive user interfaces.Implementation
Learn how to implement these components in your projects with code examples.Avatar 👾
Avatar comes from the Sanskrit word avatarana. In Hinduism it refers specifically to a deity descending to earth in bodily form (human or animal) to restore cosmic order.[2]
This theological term turns out to have quite a history in computing. Early geeks and sci-fi writers first brought it into the field. The following section was drafted with help from Gemini. Earliest appearance (1979 - PLATO) Given philosophical weight (1985 - Ultima IV) [3] The visual definition takes hold (1986 - Habitat) The largest part of the screen is devoted to the graphics display. This is an animated view of the player’s current location in the Habitat world. The scene consists of various objects arrayed on the screen, such as the houses and tree you see here. The players are represent by animated figures that we call “Avatars”. Avatars are usually, though not exclusively, humanoid in appearance. In this scene you can see two of them, carrying on a conversation. Going mainstream (1992 - Snow Crash) Modern usage: from full body to “headshot” In digital UI design, the Avatar stands for a user’s digital identity or virtual persona, usually shown as a round or square profile picture. It has become the core component for user recognition and personalization in modern apps.
The word first showed up in the game Avatar on the early multi-user PLATO system, though at the time it mostly named the game itself.
The famous role-playing game Ultima IV: Quest of the Avatar was a milestone. Designer Richard Garriott wanted players to do more than move a game piece — he wanted them morally accountable for their actions. He called the player character “The Avatar”, implying that the figure on screen is a vessel for the real player’s soul outside the screen.
This is the key moment when Avatar became the “profile picture / embodiment” we know today.
Lucasfilm Games built Habitat, the earliest large-scale multiplayer online community. Developers Chip Morningstar and F. Randall Farmer were the first to formally use Avatar for the little figure the user controls on screen.
Neal Stephenson’s cyberpunk classic Snow Crash pushed the concept to a mass audience. The book depicts a virtual world called the “Metaverse” where people socialize through Avatars. It defined the modern internet’s imagination of the Avatar: it can be a projection of your real self, or the self you fantasize about.
As the internet grew, the meaning of Avatar split:
Spinner & Skeleton Screen ⏳
Around 1300, the word meant “spider”, derived as a noun from the verb spin. The sense “one who spins thread” appeared in the late 14th century (late 13th century as a surname), usually referring to women. The OED notes that spinner in the “spider” sense was fairly common between 1530 and 1615; today that use is mostly dialectal or rhetorical.
The endlessly rotating loading circle was everywhere on early web pages; the term is Spinner. More modern pages and apps tend to avoid it, see Mobile Design Details: Avoid The Spinner.
In the days of slow connections, you’d often stare at a spinner for ages. In 2013, to improve the experience, Luke Wroblewski proposed showing the page’s outline in advance, letting users preview the structure of the content about to load. It looks like the page’s “bones”, hence the name Skeleton.
When you see gray squares (avatar placeholders) and gray bars (text placeholders), your brain fills in the blanks and produces the illusion that the content is already half-loaded.
By the way, this blog doesn’t use a loading animation for images either. It uses blurred thumbnails instead.
MISC
A few more components whose names are just plain English words, no elaboration needed, quick summary:Term Origin In short Tabs Folder tabs Jump quickly between categories Panel Panel Divides regions, holds content Drawer Drawer Slide-out panel from the side/bottom Badge Badge Status/count markers Tooltip Tip tool Extra info on hover Pagination Pages Navigation across split pages
Read Also
The Component Gallery: The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.
Source: CAROUSEL - Definition & Meaning - Reverso English Dictionary ↩︎
The player again plays the Stranger, but this time the ultimate goal is not to defeat an evil villain – instead a path of Virtue has to be followed and a virtuous life led. Together with seven companions, the Stranger manages to master all of the eight Virtues by talking to the people, meditating at shrines, and setting a good example by living the Virtues. After recovering a number of important artifacts, as well as the Key of Three Parts, the party then descends into the depths of the Abyss, where they ultimately recover the Codex of Ultimate Wisdom. The Codex asks a series of questions relating to the Virtues, after which it confirms the Stranger as the Avatar, the hero of Britannia and defender of Virtue. ↩︎