A quick guide to design tabs and button atoms

How to structure the most basic atoms, here is the quick guide.

What are tabs?

Tabs help the users to understand the structure of content across different screens.

While designing the variants of the tab component it should be put in notice that the parent component should cover all the possibilities.

What are the most common types of tab variants?

1. Two icons and a text
2. Text and a trailing icon
3. Leading icon and a text
4. Only icon
5. Only text

Unlike the button component the tab component is embedded with an active tab indicator, which further helps the user to understand the tab screen the user is navigating.

What are the most common types of button variants, which are used across various other globally followed design systems? 🤔

Here they are:

- Two icons with a text
- Leading icon with a text
- Trailing icon with a text
- Only icon
- Only text

How to create them?

To begin with, you need to create a master/parent button component, which covers all the possibilities and properties from which we can create different variants.

In the below-mentioned case, the first button image, which is “Two icons and a text” is our parent component.

Now the breakdown process begins. You have to further ideate what variants I can create from my parent component.

The breakdown process would give you an idea of the list of all the possible variants you can create from your master component.