@finastra/tab-bar/demo/index.html

TabBar Web Component

<script type="module" src="node_modules/@finastra/tab/dist/src/tab.js"></script>
<script type="module" src="node_modules/@finastra/tab-bar/dist/src/tab-bar.js"></script>

<div style="display: flex; flex-direction: column">
  <fds-tab-bar style="padding-bottom: 16px" seperator>
    <fds-tab label="Active"></fds-tab>
    <fds-tab label="Inactive" disabled></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
    <fds-tab label="Inactive"></fds-tab>
  </fds-tab-bar>
  <fds-tab-bar style="padding-bottom: 16px">
    <fds-tab label="Active" icon="location_on"></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app"></fds-tab>
    <fds-tab label="Inactive" icon="location_on"></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app"></fds-tab>
  </fds-tab-bar>

  <fds-tab-bar style="padding-bottom: 16px">
    <fds-tab label="Active" icon="location_on" stacked></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app" stacked></fds-tab>
    <fds-tab label="Inactive" icon="location_on" stacked></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app" stacked></fds-tab>
  </fds-tab-bar>

  <fds-tab-bar>
    <fds-tab label="Active" icon="location_on" segmented></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app" segmented></fds-tab>
    <fds-tab label="Inactive" icon="location_on" segmented></fds-tab>
    <fds-tab label="Inactive" icon="exit_to_app" segmented></fds-tab>
  </fds-tab-bar>

  <fds-tab-bar seperator>
    <fds-tab label="Active" classic></fds-tab>
    <fds-tab label="Inactive" classic></fds-tab>
    <fds-tab label="Inactive" classic></fds-tab>
    <fds-tab label="Inactive" classic></fds-tab>
    <fds-tab label="Inactive" classic></fds-tab>
  </fds-tab-bar>
</div>

<style>
  fds-tab {
    background: var(--fds-surface);
  }
</style>