Essential UI components

Buttons are the component that most directly impacts conversion. A well-designed button system has a clear hierarchy: primary (main action), secondary (alternative actions) and tertiary or ghost (low-priority actions). Each tier should be immediately distinguishable visually.

A primary button should have a solid background in the brand’s accent colour, contrasting text and a minimum size that invites clicking or tapping. Secondary buttons typically use an outline with no solid fill. Ghost buttons appear as linked text with no border or fill. Every button must have visible states: default, hover, active, focus and disabled.

Forms are the point where most users drop off. Each additional field increases friction, so the first rule is to ask only for information that is strictly necessary. A contact form with name, email and message converts significantly better than one with 10 fields.

Fields should have permanently visible labels (not just placeholder text, which disappears on input), clear validation states (real-time when possible), specific error messages ("The email format is invalid" rather than "Field error") and a single-column vertical layout on mobile.

Cards are visual containers that group related information: a product, an article, a user profile. Their strength lies in scannability: users can scan a grid of cards quickly and decide which one interests them without reading all the content.

An effective card has a clear internal hierarchy: image or visual element on top, prominent title, brief description and action (button or link) at the bottom. The most common mistake is packing too much content into a card — if it needs internal scrolling, the card is too complex and should be a separate page.

A modal is an overlay window that blocks interaction with the background content. It is intrusive by nature, so it should only be used when the action requires immediate attention: confirming a deletion, accepting terms, completing a process that cannot be postponed.

The most common modal mistakes are using them for content that should be a page, nesting modals inside modals (confusing experience) and not allowing closure with the Escape key or by clicking the overlay. Every modal must be keyboard-accessible and have a focus trap to prevent users from tabbing outside it.

Dropdowns (select, combobox, context menu) are one of the most problematic interface components. The native HTML select has styling that varies across browsers and is difficult to customise. Custom dropdowns offer full visual control but require manually implementing accessibility: arrow-key navigation, type-ahead search, screen reader support.

For lists of fewer than 5–7 options, radio buttons or segmented controls are usually better than a dropdown because they make all options visible without extra interaction. Dropdowns are justified when there are more than 7 options or when space is limited.

Tables are the best component for displaying comparative or tabular data: product listings, user records, financial transactions. On desktop, a well-designed table with aligned columns, alternating row colours and sticky headers is extremely efficient for scanning data.

The challenge lies in responsiveness. Tables with many columns do not work on mobile. The most common strategies are: horizontal scroll with a fixed first column, card layout (each row becomes a card), or showing only essential columns with a "view more" button for details.

Tooltips are small text boxes that appear on hover over an element to provide additional context. They are useful for explaining unlabelled icons, showing keyboard shortcuts or clarifying form fields without cluttering the interface with permanent text.

The main problem with tooltips is that they rely on hover, which does not exist on touch devices. The mobile alternative is a popover, which is activated on tap and stays visible until dismissed. Tooltips should contain only brief text; if you need richer content (images, links, forms), a popover or modal is more appropriate.