Interface elements
Buttons, cards, forms and menus — how they work on a real page, with live examples and code.
Articles · 8
-
Loading and empty states
What to show by the length of the wait, a skeleton instead of a spinner, space reserved in advance, four kinds of empty screens and a search with a way out — with live examples.
Read
-
Notifications and toasts
Five kinds of messages from quiet to loud, a toast with “Undo”, where it appears on a phone, words that help and one message instead of five — with live examples.
Read
-
Tables on a phone
Three ways to fit a table on a phone and how to choose, main columns first, numbers that can be compared and plans one per screen — with live examples.
Read
-
Modal windows
When a window is justified, what it consists of, a bottom sheet on a phone, the keyboard focus, pop-ups on entry and the native dialog element — with live examples.
Read
-
Navigation and the mobile menu
Section names in the visitor’s words, three ways to fit a menu on a phone, an open mobile menu, a header that steps aside and breadcrumbs — with live examples.
Read
-
Forms and fields
How many fields to ask for, a label above the field, a width that hints at the answer, the right phone keyboard, autofill and errors after sending — with live examples.
Read
-
Product cards
What a card consists of, an even row, the key attribute by category, a readable price, two columns on a phone and one badge instead of five — with live examples.
Read
-
Buttons
One main action per screen, labels that say what will happen, a button or a link, the tap area, the thumb zone and dangerous actions — with live examples.
Read