Sign In


Tabs Styles and Usage


Tabs can be used to quickly navigate between views of the same context or as navigational elements within page views.


tabs anatomy
  1. Active Tab

    Active Tabs are indicated by using a solid color with 100% opacity and a underline that is 2px high

  2. Solid Underline

    The solid underline is required for active and hover states

  3. Inactive Tabs

    Inactive tabs are characterized by dropping their opacity to 60%.

  4. Icons

    Icons are optional and not required. Their color should be the same as the text color for the state they are in.

Usage Examples

Tabs are great for organizing like data and views. Here are some examples of them being used in our products