Tab Item

.tab-item makes an action look like an item in a tab list.

Applicable Elements

Basic Usage

SalmonSea BreamMackerel
<button class="tab-item">Tuna</button>
<button class="tab-item">Yellowtail</button>
<a class="tab-item" href="/salmon">Salmon</a>
<a class="tab-item active" href="/sea-bream">Sea Bream</a>
<a class="tab-item" href="/mackerel">Mackerel</a>

States

Use .active for the current item. Button tab items can also be disabled.

<button class="tab-item">Lean Tuna</button>
<button class="tab-item active">Fatty Tuna</button>
<button class="tab-item" disabled>Sold Out</button>