Tab

<gstock-tab> | GstockTab
Tab 
<gstock-tab>Tab</gstock-tab>

Colors

Use the color attribute attribute to set the tab color.

Primary Secondary 
<gstock-tab color="primary">Primary</gstock-tab>
<gstock-tab color="secondary">Secondary</gstock-tab>

Active

Use the active attribute to active the tab item.

Active 
<gstock-tab active>Active</gstock-tab>

Disabled

Use the disabled attribute to disable the tab.

Disabled 
<gstock-tab disabled>Disabled</gstock-tab>

Closable

Closable 
<gstock-tab closable>Closable</gstock-tab>

Icon

Home Messages Music Uploads 
<gstock-tab-group>
  <gstock-tab slot="nav" icon="home">Home</gstock-tab>
  <gstock-tab slot="nav" icon="message-square">Messages</gstock-tab>
  <gstock-tab slot="nav" icon="music">Music</gstock-tab>
  <gstock-tab slot="nav" icon="upload">Uploads</gstock-tab>
</gstock-tab-group>

Use the href attribute to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides and exposes the target and download attributes.

Link New Window Download Disabled 
<gstock-tab-group>
  <gstock-tab icon="link" href="https://example.com/">
    Link
  </gstock-tab>
  <gstock-tab icon="external-link" href="https://example.com/" target="_blank">
    New Window
  </gstock-tab>
  <gstock-tab icon="download" href="/assets/images/wordmark.svg" download="gstock.svg">
    Download
  </gstock-tab>
  <gstock-tab icon="x-circle" href="https://example.com/" disabled>
    Disabled
  </gstock-tab>
</gstock-tab-group>