Tabs

A tab strip built three ways: with button variants, inverted color-modes, or plain links.

component

Using several .v-button, you can use different variants to toggle which one looks active. This would require JS, because you'd need to toggle from data-variant="outlined to data-variant="filled

Show editor

<button
  role="tab"
  class="v-button br-pill"
  data-size="small"
  data-variant="outlined"
>
  Not active
</button>
<button
  role="tab"
  class="v-button br-pill"
  data-size="small"
  data-variant="outlined"
>
  Not active
</button>
<button
  role="tab"
  aria-selected="true"
  class="v-button br-pill"
  data-size="small"
  data-variant="filled"
>
  Active
</button>

Or, we might put the buttons inside of container using of-clip br-pill b-all. Then use <color-mode> and change to palette="blue" in addition to the button changing from data-variant="plain to data-variant="filled:

Not selected

Selected

Not selected

Show editor

<div class="stack-h of-clip br-pill b-all" style="width: max-content;">
  <color-mode class="">
    <div class="v-button br-none" data-size="small" data-variant="plain">
      Not selected
    </div>
  </color-mode>
  <color-mode palette="blue">
    <div class="v-button  br-none" data-size="small" data-variant="filled">
      Selected
    </div>
  </color-mode>
  <color-mode class="">
    <div class="v-button  br-none" data-size="small" data-variant="plain">
      Not selected
    </div>
  </color-mode>
</div>

Without buttons, only color-mode:

Not selected

Selected

Not selected

Show editor

<color-mode
  class="stack-h br-pill of-clip b-all  mt-xl"
  style="width: max-content;"
>
  <color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
    <a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
      >Not selected</a
    >
  </color-mode>
  <color-mode
    inverted
    class="surface-dyed b-r bc-subtle b-none:last-child d-block "
  >
    <a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s">
      Selected</a
    >
  </color-mode>
  <color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
    <a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
      >Not selected</a
    >
  </color-mode>
  <color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
    <a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
      >Not selected</a
    >
  </color-mode>
</color-mode>