Tabs

Tabs is a design is a technique used to divide content into separate pages, typically with a limited number of items per page. It allows users to navigate through large sets of data or content easily and efficiently. Pagination enhances usability by breaking down information into manageable chunks, preventing overwhelming users with too much information at once.

Key Elements of Tabs:

• Navigation Controls:
  • Page Numbers: Links to specific pages (e.g., 1, 2, 3).
  • Next/Previous Buttons: Allow moving forward or backward one page at a time.
  • Current Page Indicator: Highlights the user's current page, often through bold text, color, or a distinct style.
  • Total Items/Pages Information: Displays the total number of items or pages, helping users understand the scope of the content.
  • Items per Page Selector (Optional): Lets users choose how many items to display per page.

Primary Tab

Primary Tab is a design is a technique used to divide content into separate pages, typically with a limited number of items per page. It allows users to navigate through large sets of data or content easily and efficiently. Pagination enhances usability by breaking down information into manageable chunks, preventing overwhelming users with too much information at once.

Component

It visually represents dates, days, and months in an organized grid format. It allows users to interact with dates for tasks such as scheduling events, picking dates, viewing appointments, or tracking activities.

Component Style

• 1
  All Payer Tab: 56px Height
• 2
  All Payer Tab: Stroke 2px
• 3
  Menu Size: Height 40px
• 4
  Font Size: 14px
• 5
  Icon Size: 21px
• 6
  Icon Size: 14px
• 7
  padding: 8px

• 8
  Vertical Padding: 8px
• 9
  Horizontal Padding: 16px
• 10
  Button Height: 40px
• 11
  Horizontal Padding: 16px
• 12
  Button Spacing: 4px
• 13
  Font Size: 14px
• 14
  Padding: 8px

Secondary Tab

Secondary tab is a design is a technique used to divide content into separate pages, typically with a limited number of items per page. It allows users to navigate through large sets of data or content easily and efficiently. Pagination enhances usability by breaking down information into manageable chunks, preventing overwhelming users with too much information at once.

Component

It visually represents dates, days, and months in an organized grid format. It allows users to interact with dates for tasks such as scheduling events, picking dates, viewing appointments, or tracking activities.

Component Style

• 1
  Font size: 16px Height
• 2
  Line Height: 3px
• 3
  Horizontal Padding: 16px

• 4
  Vertical Padding: 8px
• 9
  Line Height: 2px

Tertiary Tab

Tertiary tab is a design is a technique used to divide content into separate pages, typically with a limited number of items per page. It allows users to navigate through large sets of data or content easily and efficiently. Pagination enhances usability by breaking down information into manageable chunks, preventing overwhelming users with too much information at once.

Component

It visually represents dates, days, and months in an organized grid format. It allows users to interact with dates for tasks such as scheduling events, picking dates, viewing appointments, or tracking activities.

Component Style

• 1
  Horizontal Padding: 16px
• 2
  Vertical Padding: 8px
• 3
  Line Height: 3px

• 4
  Font Size: 16px Medium
• 5
  Margin Left: 8px
• 6
  Icon Size: 16 x 16

---

Component Style

• 1
  Horizontal Padding: 12px
• 2
  Vertical Padding: 8px
• 3
  Font Size: 16px Medium

• 4
  Margin Left: 8px
• 5
  Line Height: 3px