UI Atlas — the interactive UI element library

Text and content

Headings, links, badges and avatars

Headings and paragraphs — A heading names a page or a section and is set larger than the text around it. A paragraph is the regular text underneath.
Link — Clickable text that takes you to another page, or to another spot on the same page.
Badge — A small pill or circle with a short word or number: “New”, “−20%”, “3”.
Avatar — A small picture that stands for a person: a photo, their initials or a generic user icon.

Buttons and actions

Buttons, switches, action menus and drag and drop

Button — An element you click or tap to make something happen: send a form, save your data, go to the next step.
Toggle (switch) — A control that flips between two states: on and off.
Three-dot menu — An icon, usually three dots in a row or a column, that opens a hidden list of secondary actions.
Floating action button — A round button that floats above the rest of the content, usually in a bottom corner of the screen.
Context menu — A hidden menu that appears when you interact with a particular object: right-click it, or press and hold.
Drag and drop — An interaction where you grab an item with the cursor or a finger and move it to a new place. The spot to grab is often marked with its own icon (a drag handle).
Copy button — A button that copies a piece of text to the clipboard with one click.

Inputs and forms

Text fields, lists, calendars, file uploads and color pickers

Text input — A field where a person types something in: letters, numbers, symbols.
Dropdown list — A field that opens a list when you click it, so you can pick one or several options.
Checkbox — A small square you tick to select an option, and untick to deselect it.
Radio button — A small circle used to pick one option out of several. Choosing another one clears the previous choice.
Slider — A control for picking a value, or a range of values, by dragging a handle along a track.
Date picker — A control for choosing a date, or a range of dates, from a visual calendar.
File upload — A control for adding files to a system: a choose-file button, or an area you drop files onto (a dropzone).
Verification code input — A field split into separate cells, one for each character of a one-time code.
Quantity selector — A control that changes a number with increase and decrease buttons, usually a field with “+” and “−” buttons.
Tag input — A text field that turns each word or phrase you type into its own tag once you press Enter or a comma.
Color picker — A tool for choosing a color: a palette, a set of ready-made swatches, or a field for HEX, RGB or HSL values.

Navigation

Headers, footers, menus and other ways to move between pages

Hamburger menu — An icon of three horizontal lines that hides the main menu off-screen until you tap it.
Tabs — A row of labels above a block of content. Click one and the block shows that section.
Breadcrumbs — A small trail of links that shows the path from the home page to where you are now.
Pagination — A way to split a long list into separate pages or batches.
Site header — The block across the top of a page that holds the logo and the main navigation.
Site footer — The block at the very bottom of a page with supporting information and links.
Sidebar — A vertical navigation panel along the left or right edge of the screen.
Stepper — A progress indicator that breaks a long process, like filling in a long form, into a sequence of steps.
Back-to-top button — A floating button, usually with an up arrow, that takes you back to the top of the page.
Table of contents — A list of links to the sections of a long document, each one jumping to its place on the page.

Page structure

Cards, tables, pricing, reviews and windows on top of the page

Card — A rectangular block that gathers everything about one thing: a photo, a name, a price, a button.
Accordion — A vertical list of headings. Click one to open or close the content hidden under it.
Carousel (slider) — A block that lets you flip through a set of images or cards by scrolling sideways.
Modal window — A window that appears over the page. Until you close it, you can’t do anything else on the page.
Table — Data laid out in rows and columns.
Empty state — What a screen or component shows when there is nothing to display: no results, an empty list, a failed load.
Pricing table — A block that lays out the price options for a service or product so you can compare them at a glance.
Testimonials — A social-proof block with feedback from users about a product or service.
Lightbox gallery — A way of viewing images where clicking a thumbnail opens it in an overlay on top of the page.
Timeline — A component that shows a sequence of events or stages in order along a line, usually a vertical one.

Feedback and status

Loading, notifications, hints, errors and warnings

Loading indicators — Anything that shows the site is busy: a progress bar, a spinning icon, or gray placeholders where content will appear.
Toast (notification) — A small message that pops up briefly at the bottom or in a corner of the screen and disappears on its own.
Tooltip — A small text bubble that appears when you hover over or focus on an element.
Alert banner — A colored strip on the page with an important message: information, success, a warning or an error.
Notification center — A place that collects system messages and events, reached through an icon, usually a bell in the header, often with an unread badge.
Product tour — A sequence of contextual hints that guide a user’s attention to the key parts of an interface.
Offline state — What the interface shows when the network connection is lost.
404 error page — The page a server returns when you go to an address that doesn’t exist.

Mobile patterns

Gestures and screens you mostly meet on a phone

Bottom navigation — A navigation bar fixed to the bottom of a phone screen, with 3–5 icons for the main sections.
Bottom sheet — A panel that slides up from the bottom edge of the screen over the current content, used for extra actions or settings.
Swipe actions — A swipe is a finger sliding across the screen. Swipe a list row left or right to delete or archive it, an email for example.
Pull to refresh — A gesture: drag a list down when it’s already scrolled to the very top. A loading icon appears and the content refreshes.
Long press — A gesture where you hold your finger on an element for a set time, usually 500 ms or more, until an action fires.
Swipe cards — A stack of cards where you decide about each one by swiping it in a particular direction.
Pinch to zoom — A multi-touch gesture for changing scale: bring two fingers together to zoom out, spread them apart to zoom in.
Splash screen — The first screen an app shows while it starts up, usually with a logo and some branding.

Online whiteboards

Canvas, sticky notes, connectors, kanban and other parts of online whiteboards like Miro

Infinite canvas — The working area of a whiteboard, with no edges. You can move it in any direction, zoom in and zoom out.
Sticky note — A digital version of a paper sticky note, used to write down a short piece of text.
Selection and handles — A frame around the selected object with small squares at the corners. You drag the squares to resize it.
Connectors — A line or arrow between two objects on a board. Move an object, and the line follows it.
Frame — A container area on an infinite canvas that groups the objects inside it. It often sets the size of a finished screen or slide.
Toolbar — A row of buttons at the edge of a board: cursor, hand, sticky note, shape, text. The selected tool is highlighted.
Minimap — A shrunken copy of the whole board in a corner of the screen. A frame on it shows which part you’re looking at.
Collaborator cursors — The pointers of other people who are in the same document at the same time, usually marked with a color and a name.
Kanban board — A way to show a workflow: columns for statuses, and task cards that move from one column to the next.
Comment pin — A marker (an icon or an avatar) attached to a specific spot or element on a canvas or screen. It opens a discussion thread.
Workshop timer — A facilitation tool that shows a countdown for a session, visible to everyone on the board.

Online store

Cart, filters, size picker, promo code and prices

Cart — The place in an online store that holds the items you’ve picked before you place an order.
Catalog filters — A set of controls, like checkboxes, selects and sliders, for narrowing down a list by several criteria.
Size picker — A set of options, often radio buttons or chips, for picking a specific variant of a product.
Promo code field — A text field for entering a code of letters and numbers that recalculates the order total.
Discounted price — A way of showing prices with the original price crossed out, the sale price and the amount you save.

Social buttons

Likes, ratings and “Share”

Like button — A one-tap way to show you approve of something, or to save it to your own collection.
Star rating — A way to rate something and to show how satisfied people were, usually on a five-point scale.
Share button — A button that sends the current content out through other channels: social networks, messengers.

The UI element library