Tab
Sections of content in a single view.
Usage
<!-- Horizontal -->
<div class="flex gap-20px">
<button type="button"
class="py-4px px-12px border-l text-p3 border-black-200 text-black-500 hover:text-foreground dark:border-black-600 dark:text-black-400">
Tab
</button>
<!-- Active state -->
<button type="button"
class="py-4px px-12px border-l text-p3 text-foreground border-foreground">
Tab
</button>
</div>
<!-- Vertical -->
<div class="flex gap-20px">
<button type="button"
class="py-4px px-12px border-b text-p3 border-black-200 text-black-500 hover:text-foreground dark:border-black-600 dark:text-black-400">
Tab
</button>
<!-- Active state -->
<button type="button"
class="py-4px px-12px border-b text-p3 text-foreground border-foreground">
Tab
</button>
</div>
<!-- Filled -->
<div class="flex gap-20px">
<button type="button"
class="rounded-8px py-12px px-32px text-p2 transition-colors hover:bg-gray-50 dark:hover:bg-black-800">
Tab
</button>
<!-- Active state -->
<button type="button"
class="rounded-8px py-12px px-32px text-p2 transition-colors bg-gray-50 dark:bg-black-800 font-medium">
Tab
</button>
</div>