Common UI Components

Components are the building blocks of an interface.

They include buttons, checkboxes, labels, inputs, cards,
and many others. Each of them has unique anatomy
and implements a specific role to help users achieve
their goals.

www.dementee.in
 Buttons

www.dementee.in
 In digital products, buttons communicate actions that
users can take.

They usually consist of a rectangular, square, or circular

shape with a label or an icon.

Buttons allow users to perform actions with a single click

or tap.

www.dementee.in
 A button can also be represented solely by an icon or
label. Text buttons and links may look similar but they do
different things.

Clicking buttons changes the state of a system (either

front or back end) while clicking links redirects you
somewhere else and doesn't change the system's state.
Plus, links often appear in the text and thus, can be
longer.

www.dementee.in
 Navigation components

www.dementee.in
 Navigation is the system of how users can move through
an app or a website. A product's navigation should be
consistent across all pages.

Navigation may include various navigational

components, for example:
Navigational bars Breadcrumb trails

Sidebars
Menus
Other features that help users find what they need

www.dementee.in
 Hamburger menus

www.dementee.in
 The hamburger menu is a button commonly found in
websites and apps that, when clicked or tapped, reveals
a side menu or navigation drawer.

Traditionally, it's represented by three parallel horizontal

lines stacked on top of each other. These lines may
sometimes be accompanied by the word "Menu" or even
an icon suggesting interaction, like an arrow.

The layout is intended to resemble a simplified drawing

of a hamburger to those with culinary inclinations -
hence the name.
www.dementee.in
 The icon serves as a compact way to hide navigation
links while offering an intuitive way for users to access
various sections of a site or app.

This design choice is particularly useful for mobile

interfaces where screen real estate is limited.

www.dementee.in
 Breadcrumbs

www.dementee.in
 Breadcrumbs are a secondary navigation element that
looks like a row of links separated by dividers, often
chevron icons (>).

Like in the tale of Hansel and Gretel, breadcrumbs leave

a trail to guide users. They show users' current location
and help them find their way around the product.

The last element on the trail should be different from the

rest of the path since it represents users' current position.
However, it should never be a link.

www.dementee.in
 Cards

www.dementee.in
 A card is a UI component that contains content and
actions about a single subject. Cards in UI resemble
trading cards in real life - they're rectangular and often
include an image and some text.

They may also contain interactive elements such as

Learn More or Read More buttons.

Pinterest is an excellent example of a website leveraging

cards to the fullest extent.

www.dementee.in
 Checkboxes

www.dementee.in
 Checkboxes are UI selection controls commonly found in
forms. Single checkboxes are often encountered when
asking for users' consent to the Terms and Conditions
and Privacy Policy.

When checked, they display a small box with a check

mark inside. When unchecked, they appear as an empty
box.

In contrast to radio buttons, checkboxes allow users to

select several options at the same time and enable or
disable each one of them.
www.dementee.in
 Containers

www.dementee.in
 A container divides content into meaningful sections.
Like storage containers help organize your pantry, UI
containers help structure and group content.

Containers can hold text, images, or action items. Rigid

containers restrict the size or cropping of elements
within them.

www.dementee.in
 Flexible containers grow to support the size of the
content they hold.

That's how responsive design works: all elements are

placed inside containers to be adapted to screen size
and orientation and guarantee consistency across
layouts.

www.dementee.in
 Menus

www.dementee.in
 A menu serves as a practical element in a UI, offering a
list of various actions that users can take.

It usually pops up when users engage with specific

controls like buttons or tabs.

Most navigation menus feature command labels paired

with icons, and occasionally, some helper text for added
context.

www.dementee.in
 The beauty of menus lies in their efficiency: they pack a
multitude of options into a compact space, keeping the
interface clean and easy to navigate.

This makes them invaluable for both desktop and mobile

designs where real estate is at a premium.

www.dementee.in
 Toggles

www.dementee.in
 Toggle buttons group 2 functions (sometimes 3) into a
single container. In Apple's Human Interface Guidelines,
you can encounter a similar component called
segmented buttons.

All buttons are usually equal in width. They behave like

radio buttons - only one button can be selected at a
time in each group. The chosen option is usually
highlighted with colors or overlays. In contrast,
segmented buttons allow multiple choices.

www.dementee.in
 Inputs

www.dementee.in
 Input fields, commonly referred to as "inputs," are
essential UI elements that enable users to input various
types of data - be it a name, password, email, or even
date and time. You'll typically find these fields within
forms and dialogs.

Their purpose is straightforward: to collect information in

a way that's efficient and user-friendly. Inputs come in
many flavors, catering to different data types and user
needs.

www.dementee.in
 They can include text boxes for general information,
password fields that obscure entered text, or specialized
fields for dates and numbers.

The key to effective use of inputs is clarity and context;

labels, placeholder text, and design cues like icons can
guide users, making their interaction with your interface
smooth and intuitive.

www.dementee.in
 Labels

www.dementee.in
 A label is a static piece of text that people can read and
often copy but not edit.

Labels display text throughout the interface, in buttons,

menu items, and views.

They aim to help people understand the current context

and what they can do next.

For example, within a button, a label generally conveys

what the button does, such as Edit, Cancel, or Send.
www.dementee.in
 Radio buttons

www.dementee.in
 Radio buttons are controls that look like outlined circles.
They use a dot or solid circle inside to show the selected
option.

Unlike checkboxes, radio buttons allow users to select

only one option. Once an option is picked, it can't return
to the unselected state.

To prevent users from being unable to undo their action,

provide a "none of the above" or similar option.

www.dementee.in
 Hyperlinks

www.dementee.in
 A hyperlink is a word, phrase, or image you can click on
to jump to a new page or section within the current
page.

The text that makes up the link is known as link text, and
it's usually immediately recognizable by its bright color
and/or underline.

www.dementee.in