Components and states

Most sites share the same anatomy, and each part has a name. The header is the band at the top of every page. It holds the logo, which usually links back to the home page, and the navigation bar, or navbar: the row of links to the main sections of the site. A menu is any list of links or actions that you choose from. On a phone, the navigation often hides behind a hamburger menu, a button with three lines that opens the menu. On a wide screen, a hamburger menu that hides three links makes visitors click for nothing.

Under the header, the hero is the large first section of a page. It holds the main title, a short text, often a photo, and the main button. On your portfolio, the hero says who you are and what you do. Breadcrumbs are a line of links that shows where the page sits in the site, such as "Home › Exhibitions › Monet". Visitors use them to go up one level. A museum or a shop with many levels needs them. A portfolio with three pages doesn't.

A sidebar is a column beside the main content, with filters, a table of contents or related links. On a computer, Vinted shows its search filters in a sidebar. The footer is the band at the bottom of every page, with the contacts, the social links and the legal notice.

The example below is a small portfolio page with a header, a hero, three project cards and a footer. The header holds the logo, the navigation bar and a call to action, "Contact me". In the code, the header, the navigation, the main content and the footer each have their own HTML tag: header, nav, main and footer. Screen readers announce these parts by name, as in the lesson "Structure and meaning". Try changing the names of the three projects, or the text of the hero.

A site is built from components: reusable pieces such as a button, a project card, a form field or the navigation bar. Each one is designed once and reused everywhere. When the designer changes the card, every project changes at once. A component can have variants, which are versions of the same component for different uses, such as a large and a small button, or a card with or without a photo.

Buttons come in a few standard variants. The primary button is for the main action of the screen, such as "Prendre rendez-vous" on Doctolib. It has the strongest look, often filled with the primary colour, and each screen should have only one. A secondary button is for the other actions, such as "See it on GitHub" next to "Download my CV". It's more discreet, with an outline or a light background. An icon button shows only an icon, a small picture that stands for an action, such as a heart, a cross or a share arrow. It needs a hidden text label for screen readers, and often a tooltip.

A call to action, or CTA, is any element that asks visitors to act: "Book a ticket", "Contact me", "Download my CV". The main call to action of a page is usually its primary button. When every button calls for action, visitors don't know which one matters.

Affordance is what an element suggests you can do with it. A filled button says "press me". Underlined blue text says "this is a link". Grey text with no border, used as a button, has poor affordance: visitors don't see that they can press it.

Pictures have names too. An illustration is a drawing, used to explain or decorate. AI design tools add generic 3D illustrations to most pages, so ask what each one tells the visitor. An avatar is a small picture that stands for a person, often a round photo or initials, such as the profile pictures on Vinted.

A form is a group of fields that visitors complete and send: a contact form, a sign-up page, a booking on Doctolib. Each kind of field has a name. A text field, also called an input, is a box where you type one line, such as a name or an email. A label is the text that says what a field is for, such as "Email". It stays visible above or next to the field. A placeholder is the grey hint inside an empty field, such as "camille@example.com". It disappears as soon as you type.

AI design tools and many designers use the placeholder as the label, because it looks cleaner. Once a visitor has typed, the hint is gone, and nobody can check what each field was asking for. Placeholders are also often too pale to read. Ask for a real label on every field.

When visitors choose instead of typing, the field depends on the choice. A checkbox is a small square that you tick, for a yes or no question, or for several choices in a list. Radio buttons are small circles for one choice among a few, such as "Reply by email" or "Reply by phone". Choosing one clears the others. A toggle, or switch, turns a setting on or off at once, like the dark mode switch in Deezer's settings. A dropdown, or select, opens a list of choices when you click it. It suits long lists, such as a list of countries. A search bar is a text field for searching, usually with a magnifying glass icon.

A long form is easier in several steps. A stepper shows the steps and where you are, such as "1 Journey, 2 Passengers, 3 Payment" when you book a train.

The example below shows the same contact form twice. On the left, placeholders replace the labels. The first field is already filled in: can you tell what it asks for? The two radio buttons have no question either. On the right, every field has a label that stays. Type something in the "Email" field on each side, and compare.

Some components appear on top of the page, on their own layer. A modal, or dialog, is a box that opens over the page and darkens everything behind it. You must answer it or close it before you can do anything else, as when a site asks "Delete this project?". It needs a visible close button, and it must close with the Escape key. A toast, or snackbar, is a short message that slides in at the edge of the screen for a few seconds, then disappears by itself, such as "Added to your favourites" on Vinted. Since it disappears, use it only for messages that visitors can safely miss. A tooltip is a small label that appears when you point at an element or reach it with the keyboard, such as "Share" over an icon.

A banner is a wide strip across the top of a page or a section, with a message for everyone, such as a strike warning on SNCF Connect. A badge is a small coloured label or number on another element, such as "New" on a card, or the number of unread messages on an icon.

Other components show content in turn. Tabs are labels in a row, and each one shows a different panel in the same place, such as "Description", "Reviews" and "Delivery" on a product page. An accordion is a list of titles that open and close to show their content, as in a list of questions and answers. A carousel shows one slide at a time, with arrows to see the next one. Few visitors go past the first slide, so an important offer on the third slide is almost invisible.

A transition is the short change from one state to another, such as a modal that fades in. An animation is any movement on the page. Short ones help visitors see what changed. Long or constant ones tire them, and some visitors ask their system for less motion.

The example below shows three of them side by side: a modal over a darkened page, a toast at the bottom of a screen, and a tooltip over an icon button. On a real site, scripts make them appear and disappear. Here, they're drawn in place so that you can compare them. Try changing the text of the toast.

Each component has states: the ways it looks, depending on what's happening. The default state is how it looks when nothing is happening. Hover is when the mouse pointer is over it. Phones have no hover, so nothing important can depend on it. Focus is when the keyboard has reached it with the Tab key. A component in focus needs a visible outline, so that keyboard users can see where they are. Active, or pressed, is the moment it's clicked or tapped. Selected is for a choice that is currently on, such as the "Projects" link in the navbar while you're on the projects page. Disabled is when it can't be used for now, such as a "Pay" button before the form is complete. It looks faded, and visitors should be able to see why.

These changes are visual feedback: the page answers each action, so visitors know that it worked. A button that doesn't change when pressed makes people press it again. A micro-interaction is a small designed moment around one action, such as the heart that fills and grows for a moment when you like a song on Deezer.

An inline error is a message shown right next to the field it's about, which says what's wrong and how to fix it: "This email address has no @ sign." It's a state of the field, and it needs a design too.

The example below shows one button from a contact form in each of its states, with the style rules for each one. Point at the first button with the mouse: it gets darker. Click inside the result and press the Tab key: the first button gets a light blue outline, which shows keyboard users where they are. The disabled button is skipped, because it can't be used. Under them, you can see the loading state, and a field in its error state with its message. Someone has to design each of these states.

Ask these questions whenever you receive a mockup, before it goes to the people or the agent who will build the site. A mockup shows the moment when everything goes right. Visitors spend part of their visit in the other moments, and those screens need a design too.

Ask for the loading state: what a list or a page shows while its content arrives. A spinner is a small turning circle that means "wait". A skeleton screen shows grey shapes where the text and pictures will appear, like the first second of a playlist on Deezer. It feels faster than a spinner. Ask for the empty state: what a list shows when it has nothing in it, such as a search with no results on Vinted. A good empty state says why it's empty and what to do next. Ask for the error states: a field with a wrong value, a page that can't load, a payment that fails. Ask for the confirmation, the message that says an action worked, such as "Your appointment is booked" on Doctolib, with what happens next.

Then ask how the design is organised. A component library is the set of all the components, each with its variants and states, ready to reuse. A design system adds the design tokens, for colours, type and spacing, and the rules for using them. Many teams build it in Figma, the online design tool that most designers use.

The handoff is the moment the designs go to the developers or to a coding agent. Ask what it includes: every state of every screen, the phone and desktop versions, the components, and the tokens as named values. A coding agent that receives the tokens uses the same values, instead of guessing them from a picture. For example: "The mockup shows the contact form only when everything is correct. Before the handoff, can we see it while sending, with a wrong email, and once the message is sent?"