Home Components Colors Typography Blog Blocks
Peacock Home Components Colors Typography Blog Blocks Direction Theme

Tabs

Container for tab components.

Usage

Home Updates Inbox Disabled Home content Updates content Inbox content Disabled content 

  <wc-tab-group>
    <wc-tabs>
      <wc-tab>Home <wc-icon slot="icon" name="home"></wc-icon></wc-tab>
      <wc-tab active="true">
        Updates
        <wc-icon slot="icon" name="update"></wc-icon>
        <wc-badge slot="badge"></wc-badge>
      </wc-tab>
      <wc-tab>
        Inbox
        <wc-icon slot="icon" name="mail"></wc-icon>
        <wc-badge slot="badge" value="99+"></wc-badge>
      </wc-tab>
      <wc-tab disabled="true">
        Disabled
        <wc-icon slot="icon" name="block"></wc-icon>
        <wc-badge slot="badge" value="!"></wc-badge>
      </wc-tab>
    </wc-tabs>

    <wc-tab-panel>
      <pc-text type="heading"> Home content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Updates content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Inbox content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Disabled content </pc-text>
    </wc-tab-panel>
  </wc-tab-group>
Overview Activity Messages Restricted First content Overview content Activity content Messages content Second content Restricted content 

  <wc-tab-group>
    <wc-tabs variant="secondary">
      <wc-tab>
        Overview
        <wc-icon slot="icon" name="dashboard"></wc-icon>
      </wc-tab>
      <wc-tab active="true">
        Activity
        <wc-badge slot="badge" value="7"></wc-badge>
      </wc-tab>
      <wc-tab>
        Messages
        <wc-icon slot="icon" name="chat"></wc-icon>
        <wc-badge slot="badge" value="12"></wc-badge>
      </wc-tab>
      <wc-tab disabled="true">
        Restricted
        <wc-icon slot="icon" name="lock"></wc-icon>
      </wc-tab>
    </wc-tabs>

    <wc-tab-panel>
      <pc-text type="heading"> First content </pc-text>
    </wc-tab-panel>
    <wc-tab-panel>
      <pc-text type="heading"> Overview content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Activity content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Messages content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Second content </pc-text>
    </wc-tab-panel>
  </wc-tab-group>
    <wc-tab-panel>
      <pc-text type="heading"> Restricted content </pc-text>
    </wc-tab-panel>
Overview Activity Messages Restricted First content Overview content Activity content Messages content Second content Restricted content 

  <wc-tab-group>
    <wc-tabs variant="filled">
      <wc-tab>
        Overview
        <wc-icon slot="icon" name="dashboard"></wc-icon>
      </wc-tab>
      <wc-tab active="true">
        Activity
        <wc-badge slot="badge" value="7"></wc-badge>
      </wc-tab>
      <wc-tab>
        Messages
        <wc-icon slot="icon" name="chat"></wc-icon>
        <wc-badge slot="badge" value="12"></wc-badge>
      </wc-tab>
      <wc-tab disabled="true">
        Restricted
        <wc-icon slot="icon" name="lock"></wc-icon>
      </wc-tab>
    </wc-tabs>

    <wc-tab-panel>
      <pc-text type="heading"> First content </pc-text>
    </wc-tab-panel>
    <wc-tab-panel>
      <pc-text type="heading"> Overview content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Activity content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Messages content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Second content </pc-text>
    </wc-tab-panel>
  </wc-tab-group>
    <wc-tab-panel>
      <pc-text type="heading"> Restricted content </pc-text>
    </wc-tab-panel>
Overview Activity Messages Restricted First content Overview content Activity content Messages content Second content Restricted content 

  <wc-tab-group>
    <wc-tabs variant="contained">
      <wc-tab>
        Overview
        <wc-icon slot="icon" name="dashboard"></wc-icon>
      </wc-tab>
      <wc-tab active="true">
        Activity
        <wc-badge slot="badge" value="7"></wc-badge>
      </wc-tab>
      <wc-tab>
        Messages
        <wc-icon slot="icon" name="chat"></wc-icon>
        <wc-badge slot="badge" value="12"></wc-badge>
      </wc-tab>
      <wc-tab disabled="true">
        Restricted
        <wc-icon slot="icon" name="lock"></wc-icon>
      </wc-tab>
    </wc-tabs>

    <wc-tab-panel>
      <pc-text type="heading"> First content </pc-text>
    </wc-tab-panel>
    <wc-tab-panel>
      <pc-text type="heading"> Overview content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Activity content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Messages content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel>
      <pc-text type="heading"> Second content </pc-text>
    </wc-tab-panel>
  </wc-tab-group>
    <wc-tab-panel>
      <pc-text type="heading"> Restricted content </pc-text>
    </wc-tab-panel>

Contained

Here are several predefined button styles, each serving its own semantic purpose.
First tab Second tab Disabled tab Last tab First content Second content Disabled Last content
First content Second content Disabled Last content First tab Second tab Disabled tab Last tab 

<wc-tab-group variant="contained">
  <wc-tabs>
    <wc-tab>First tab</wc-tab>
    <wc-tab selected="true">Second tab</wc-tab>
    <wc-tab disabled="true">Disabled tab</wc-tab>
    <wc-tab>Last tab</wc-tab>
  </wc-tabs>

  <wc-tab-panel class="layer-01">
    <pc-text type="heading"> First content </pc-text>
  </wc-tab-panel>

  <wc-tab-panel class="layer-01">
    <pc-text type="heading"> Second content </pc-text>
  </wc-tab-panel>

  <wc-tab-panel class="layer-01">
    <pc-text type="heading"> Disabled </pc-text>
  </wc-tab-panel>

  <wc-tab-panel class="layer-01">
    <pc-text type="heading"> Last content </pc-text>
  </wc-tab-panel>

</wc-tab-group>

  <br>


  <wc-tab-group variant="contained">
    <wc-tab-panel class="layer-01">
      <pc-text type="heading"> First content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel class="layer-01">
      <pc-text type="heading"> Second content </pc-text>
    </wc-tab-panel>

    <wc-tab-panel class="layer-01">
      <pc-text type="heading"> Disabled </pc-text>
    </wc-tab-panel>

    <wc-tab-panel class="layer-01">
      <pc-text type="heading"> Last content </pc-text>
    </wc-tab-panel>

    <wc-tabs>
      <wc-tab>First tab</wc-tab>
      <wc-tab selected="true">Second tab</wc-tab>
      <wc-tab disabled="true">Disabled tab</wc-tab>
      <wc-tab>Last tab</wc-tab>
    </wc-tabs>
  </wc-tab-group>

Icons

Here are several predefined button styles, each serving its own semantic purpose.
First tab Second tab Disabled tab Last tab First tab content Second tab content

Circle Email 

<wc-tab-group>
  <wc-tabs>
    <wc-tab>First tab</wc-tab>
    <wc-tab selected="true">Second tab</wc-tab>
    <wc-tab disabled="true">Disabled tab</wc-tab>
    <wc-tab>Last tab</wc-tab>
  </wc-tabs>

  <wc-tab-panel>
    <pc-text type="heading"> First tab content </pc-text>
  </wc-tab-panel>

  <wc-tab-panel>
    <pc-text type="heading"> Second tab content </pc-text>
  </wc-tab-panel>
</wc-tab-group>

<br>
<br>

<wc-tab-group>
  <wc-tabs>
    <wc-tab icon="home"></wc-tab>
    <wc-tab icon="circle--solid" selected="true">Circle</wc-tab>
    <wc-tab disabled="true" icon="email">Email</wc-tab>
    <wc-tab icon="star--filled"></wc-tab>
  </wc-tabs>
</wc-tab-group>

API Reference

Properties
On this page

Tabs

Sponsor