...
Element | Description | Mobile | Web |
|---|---|---|---|
Money input | Yes | Yes | |
Search input | Yes | No | |
Phone number input | Yes | Yes | |
Country input | Yes | Yes | |
Date input | Yes | Yes | |
Date of birth input | Yes | Yes | |
Select input | Yes | Yes | |
Text input | Yes | Yes | |
Text areaTextarea | Yes | Yes | |
Keypad | Yes | No | |
Time picker input (optional) | Yes | Yes | |
Alert | Yes | Yes | |
Popover | No | Yes | |
Critical Banner | Yes | Yes | |
Breadcrumb | No | Yes | |
Accordion | Yes | Yes | |
Countdown | Yes | Yes |
...
Element | Description | Mobile | Web |
|---|---|---|---|
Button | Yes | Yes | |
Text input | Yes | No | |
Country input | Yes | Yes | |
Password input | Yes | Yes | |
PIN input | Yes | Yes | |
Money input | Yes | Yes | |
Mobile number input | Yes | Yes | |
Date input | Yes | Yes | |
Date of birth input |
Navigation
...
Yes | Yes | ||
Select input | Yes | Yes | |
Search input | Yes | Yes | |
Text input | Yes | Yes | |
Textarea | Yes | Yes | |
Keypad | Yes | Yes | |
Time picker input (optional) | Yes | Yes | |
Toggle | Yes | Yes | |
Calendar | No | Yes | |
Rating | Yes | Yes | |
Action list | No | Yes | |
File upload | Yes | Yes | |
Image upload | Yes | Yes |
Navigation
Components that aid navigation from one page or view to the other.
Element | Description | Mobile | Web |
|---|---|---|---|
Money inputBreadcrumb | Yes | Yes | |
Search inputTab | Yes | No | |
Stepper | Yes | Yes | |
Header (navbar) | Yes | Yes | |
Side menu | Yes | Yes | |
Bottom tabs | Yes | Yes |
Media
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money inputFlag | Yes | Yes | |
Visual patterns | Search inputYes | YesNo | |
Video thumbnail* | |||
Audio player* |
Feedback
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money inputAlerts | Yes | Yes | |
Search inputPopover | Yes | No | |
Tooltips | Yes | Yes | |
Critical banner | Yes | Yes | |
Preloader (loading bar) | Yes | Yes | |
Loading spinner | Yes | Yes | |
Rating | Yes | Yes | |
Progress bar | Yes | Yes |
Data display
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money inputAvatar | Yes | YesSearch input | |
Badge (tag) | Yes | No | |
Action chips | Yes | Yes | |
Accordion | Yes | Yes | |
Table | Yes | Yes | |
Stacked list | Yes | Yes | |
Information list | Yes | Yes | |
Pie chart | Yes | Yes | |
Doughnut chart | Yes | Yes | |
Bar chart | Yes | Yes | |
Line chart | Yes | Yes | |
Countdown | Yes | Yes |
Layout
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money inputCard | Yes | Yes | |
Search inputPrimers | Yes | No | |
Terminal | Yes | Yes | |
Bottom sheet | Yes | Yes | |
Feedback (terminal) | Yes | Yes |
Rules of use
Follow the naming schema
Be consistency - use consistent names across components
Be clear and meaningful - clear to the last detail
Avoid reusing component names in your properties e.g itemsList
Use simple pronounceable names
Remove your emotion or moods
Use positive words
...