Tabs

The Tabs component provides lightweight semantic tab navigation using custom elements.

Ignix Lite tabs support multiple visual variants, semantic styling, and keyboard-accessible interactions without external dependencies.

---

Preview

Preview

Box Tabs

Underline Tabs

Pill Tabs

Gradient Tabs

Code

<!-- Default -->

<ix-tabs>
  <button slot="tab" aria-selected="true">
    Overview
  </button>

  <button slot="tab">
    Analytics
  </button>

  <button slot="tab">
    Settings
  </button>
</ix-tabs>


<!-- Underline -->

<ix-tabs data-variant="underline">
  <button slot="tab" aria-selected="true">
    Profile
  </button>

  <button slot="tab">
    Activity
  </button>

  <button slot="tab">
    Security
  </button>
</ix-tabs>


<!-- Pill -->

<ix-tabs data-variant="pill">
  <button slot="tab" aria-selected="true">
    Files
  </button>

  <button slot="tab">
    Shared
  </button>

  <button slot="tab">
    Starred
  </button>
</ix-tabs>


<!-- Gradient -->

<ix-tabs data-variant="gradient">
  <button slot="tab" aria-selected="true">
    Home
  </button>

  <button slot="tab">
    Dashboard
  </button>

  <button slot="tab">
    Reports
  </button>
</ix-tabs>

Usage

Preview

Code

<ix-tabs data-variant="pill">
  <button slot="tab" aria-selected="true">
    Account
  </button>

  <button slot="tab">
    Billing
  </button>

  <button slot="tab">
    Notifications
  </button>
</ix-tabs>

---

Attributes

Attribute	Type	Description
data-variant	'underline' | 'pill' | 'gradient'	Applies visual tab styles
slot="tab"	slot	Defines tab trigger buttons
aria-selected	boolean	Indicates active tab state