UI UX Library

Badge

The notification element is called a badge, and is commonly round and in a colour which stands out from the surrounding elements to draw attention....

Date and time pickers

Date and time pickers allow the user to choose from a defined set of times and dates, commonly from a list or calendar. This is...

Key

The legend or key allows the user to understand what they see in an interface, map or table. It can be an explanation of abbreviations...

Label

A label allows the user to understand a single element. It is often in the form of information, and can have an implied instruction. For...

Legend

The legend or key allows the user to understand what they see in an interface, map or table. It can be an explanation of abbreviations...

Map pin, pushpin

This symbol is called the map pin, or the pushpin, and is used to mark something on a map. Usually a location or point of...

Predictive search

A predictive search is when alternative endings to what the user has started typing appear as options that the user can search. The system predicts...

Sign-posting

Sign posts show users what step they are on, and how many steps there are in total. This is useful in multi-step forms to give the...

Zero state

Zero state is when something is not filled in. The zero state needs to be designed to help the user to fill it in –...

404 page

A 404 page is the page the user ends up on if the link they tried using leads to a page which does not exist...