Tab

Individual tab within a tabs component.

Props

heading

string

The text label for this tab. Can also use the heading slot for custom content.

open

boolean

Whether this tab is currently selected/active.

Defaults to false.

disabled

boolean

Defaults to false.

slug

string

Slots

heading

Named slot for content

Examples

Set a specific tab to be active

const review = [0, 1, 2, 3];
  const complete = [0, 1];

<GoabxTabs initialTab={2}>
      <GoabTab heading="All">
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {review.map((i) => (
              <tr key={`review-${i}`}>
                <td>
                  <GoabxBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
            {complete.map((i) => (
              <tr key={`complete-${i}`}>
                <td>
                  <GoabxBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
      <GoabTab heading={<>Review pending<GoabxBadge type="important" content="4" icon={false} /></>}>
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {review.map((i) => (
              <tr key={i}>
                <td>
                  <GoabxBadge type="important" content="Review pending" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
      <GoabTab heading={<>Complete<GoabxBadge type="information" content="338" icon={false} /></>}>
        <GoabxTable width="100%">
          <thead>
            <tr>
              <th>Status</th>
              <th>Text</th>
              <th className="goa-table-number-header">Number</th>
              <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {complete.map((i) => (
              <tr key={i}>
                <td>
                  <GoabxBadge type="information" content="Complete" />
                </td>
                <td>Lorem Ipsum</td>
                <td className="goa-table-number-column">1234567890</td>
                <td>
                  <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                </td>
              </tr>
            ))}
          </tbody>
        </GoabxTable>
      </GoabTab>
    </GoabxTabs>

review = [0, 1, 2, 3];
  complete = [0, 1];

<goabx-tabs [initialTab]="2">
  <goab-tab heading="All">
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of review; track $index) {
        <tr>
          <td>
            <goabx-badge type="important" content="Review pending"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        } @for (i of complete; track $index) {
        <tr>
          <td>
            <goabx-badge type="information" content="Complete"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="reviewPending">
    <ng-template #reviewPending
      >Review pending<goabx-badge
        type="important"
        content="4"
        [icon]="false"
      ></goabx-badge
    ></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of review; track $index) {
        <tr>
          <td>
            <goabx-badge type="important" content="Review pending"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="completeTemplate">
    <ng-template #completeTemplate
      >Complete<goabx-badge type="information" content="338" [icon]="false"></goabx-badge
    ></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of complete; track $index) {
        <tr>
          <td>
            <goabx-badge type="information" content="Complete"></goabx-badge>
          </td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td>
            <goabx-button type="tertiary" size="compact">Action</goabx-button>
          </td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
</goabx-tabs>

<goa-tabs version="2" initialtab="2">
  <goa-tab>
    <div slot="heading">All</div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Review pending<goa-badge version="2" type="important" content="4" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Complete<goa-badge version="2" type="information" content="338" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
</goa-tabs>

Show different views of data in a table

const review = [0, 1, 2, 3];
  const complete = [0, 1];

<GoabxTabs initialTab={1}>
          <GoabTab heading="All">
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={`review-${i}`}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
                {complete.map((i) => (
                  <tr key={`complete-${i}`}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
                Review pending
                <GoabxBadge type="important" content="4" icon={false} />
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {review.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="important" content="Review pending" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
          <GoabTab
            heading={
              <>
                Complete
                <GoabxBadge type="information" content="338" icon={false} />
              </>
            }
          >
            <GoabxTable width="100%">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Text</th>
                  <th className="goa-table-number-header">Number</th>
                  <th style={{ width: "1%", whiteSpace: "nowrap" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {complete.map((i) => (
                  <tr key={i}>
                    <td>
                      <GoabxBadge type="information" content="Complete" />
                    </td>
                    <td>Lorem Ipsum</td>
                    <td className="goa-table-number-column">1234567890</td>
                    <td>
                      <GoabxButton type="tertiary" size="compact">Action</GoabxButton>
                    </td>
                  </tr>
                ))}
              </tbody>
            </GoabxTable>
          </GoabTab>
    </GoabxTabs>

reviewItems = [0, 1, 2, 3];
  completeItems = [0, 1];

<goabx-tabs>
  <goab-tab heading="All">
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of reviewItems; track $index) {
        <tr>
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
        @for (i of completeItems; track $index) {
        <tr>
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="reviewPending">
    <ng-template #reviewPending>Review pending<goabx-badge type="important" content="4" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of reviewItems; track $index) {
        <tr>
          <td><goabx-badge type="important" content="Review pending"></goabx-badge></td>
          <td>Lorem ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
  <goab-tab [heading]="completeTab">
    <ng-template #completeTab>Complete<goabx-badge type="information" content="338" [icon]="false"></goabx-badge></ng-template>
    <goabx-table width="100%">
      <thead>
        <tr>
          <th>Status</th>
          <th>Text</th>
          <th class="goa-table-number-header">Number</th>
          <th style="width: 1%; white-space: nowrap">Action</th>
        </tr>
      </thead>
      <tbody>
        @for (i of completeItems; track $index) {
        <tr>
          <td><goabx-badge type="information" content="Complete"></goabx-badge></td>
          <td>Lorem Ipsum</td>
          <td class="goa-table-number-column">1234567890</td>
          <td><goabx-button type="tertiary" size="compact">Action</goabx-button></td>
        </tr>
        }
      </tbody>
    </goabx-table>
  </goab-tab>
</goabx-tabs>

<goa-tabs version="2">
  <goa-tab>
    <div slot="heading">All</div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Review pending<goa-badge version="2" type="important" content="4" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="important" content="Review pending"></goa-badge></td>
            <td>Lorem ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
  <goa-tab>
    <div slot="heading">Complete<goa-badge version="2" type="information" content="338" icon="false"></goa-badge></div>
    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Text</th>
            <th class="goa-table-number-header">Number</th>
            <th style="width: 1%; white-space: nowrap">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><goa-badge version="2" type="information" content="Complete"></goa-badge></td>
            <td>Lorem Ipsum</td>
            <td class="goa-table-number-column">1234567890</td>
            <td><goa-button version="2" type="tertiary" size="compact">Action</goa-button></td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </goa-tab>
</goa-tabs>

No usage guidelines have been documented for this component yet.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.