Secondary Tabs
Secondary tabs allows users to switch between multiple sections of content within a single section/container.
Class | Type | |
---|---|---|
secondary-tabs
|
Secondary Tabs | A class representing secondary tabs |
Components
Secondary Tabs consist of two components:
Class | Type | |
---|---|---|
secondary-tabs-item
|
Item | |
secondary-tabs-button
|
Button |
<ul class="secondary-tabs">
<li class="secondary-tabs-item">
<button class="secondary-tabs-button"><span class="text">Item</span></button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button" disabled><span class="text">Item</span></button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button"><span class="text">Item</span></button>
</li>
</ul>
Sizes
Class | Type | |
---|---|---|
is-large
|
Large | Used for big sections or to switch between code snippets |
<ul class="secondary-tabs is-large">
<li class="secondary-tabs-item">
<button class="secondary-tabs-button"><span class="text">Item</span></button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button" disabled><span class="text">Item</span></button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button"><span class="text">Item</span></button>
</li>
</ul>