Tabs
Let users navigate between related sections of content, displaying one section at a time.
Props
initialtab
number
The initially active tab (1-based index). If not set, the first tab is active.
Defaults to
-1.
testId
string
Sets a data-testid attribute for automated testing.
variant
default | segmented
Visual style variant. "segmented" shows pill-style tabs with animation.
Defaults to
default.
orientation
auto | horizontal
Tab layout orientation. "auto" stacks vertically on mobile, "horizontal" keeps horizontal on all screen sizes.
Defaults to
auto.
navigation
hash | none
Defaults to
hash.
Events
onChange
(event: Event) => void
_change
CustomEvent
Tab 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
Tab Slots
heading
Named slot for content
Set a specific tab to be active
const review = [0, 1, 2, 3];
const complete = [0, 1];<GoabTabs initialTab={2}>
<GoabTab heading="All">
<GoabTable 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>
<GoabBadge type="important" content="Review pending" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
{complete.map((i) => (
<tr key={`complete-${i}`}>
<td>
<GoabBadge type="information" content="Complete" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
<GoabTab heading={<>Review pending<GoabBadge type="important" content="4" icon={false} /></>}>
<GoabTable 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>
<GoabBadge type="important" content="Review pending" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
<GoabTab heading={<>Complete<GoabBadge type="information" content="338" icon={false} /></>}>
<GoabTable 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>
<GoabBadge type="information" content="Complete" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
</GoabTabs>review = [0, 1, 2, 3];
complete = [0, 1];<goab-tabs [initialTab]="2">
<goab-tab heading="All">
<goab-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>
<goab-badge type="important" content="Review pending"></goab-badge>
</td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goab-button type="tertiary" size="compact">Action</goab-button>
</td>
</tr>
} @for (i of complete; track $index) {
<tr>
<td>
<goab-badge type="information" content="Complete"></goab-badge>
</td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goab-button type="tertiary" size="compact">Action</goab-button>
</td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
<goab-tab [heading]="reviewPending">
<ng-template #reviewPending
>Review pending<goab-badge
type="important"
content="4"
[icon]="false"
></goab-badge
></ng-template>
<goab-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>
<goab-badge type="important" content="Review pending"></goab-badge>
</td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goab-button type="tertiary" size="compact">Action</goab-button>
</td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
<goab-tab [heading]="completeTemplate">
<ng-template #completeTemplate
>Complete<goab-badge type="information" content="338" [icon]="false"></goab-badge
></ng-template>
<goab-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>
<goab-badge type="information" content="Complete"></goab-badge>
</td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goab-button type="tertiary" size="compact">Action</goab-button>
</td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
</goab-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];<GoabTabs initialTab={1}>
<GoabTab heading="All">
<GoabTable 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>
<GoabBadge type="important" content="Review pending" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
{complete.map((i) => (
<tr key={`complete-${i}`}>
<td>
<GoabBadge type="information" content="Complete" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
<GoabTab
heading={
Review pending
<GoabBadge type="important" content="4" icon={false} />
}
>
<GoabTable 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>
<GoabBadge type="important" content="Review pending" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
<GoabTab
heading={
<>
Complete
<GoabBadge type="information" content="338" icon={false} />
</>
}
>
<GoabTable 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>
<GoabBadge type="information" content="Complete" />
</td>
<td>Lorem Ipsum</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabButton type="tertiary" size="compact">Action</GoabButton>
</td>
</tr>
))}
</tbody>
</GoabTable>
</GoabTab>
</GoabTabs>reviewItems = [0, 1, 2, 3];
completeItems = [0, 1];<goab-tabs>
<goab-tab heading="All">
<goab-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><goab-badge type="important" content="Review pending"></goab-badge></td>
<td>Lorem ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td><goab-button type="tertiary" size="compact">Action</goab-button></td>
</tr>
}
@for (i of completeItems; track $index) {
<tr>
<td><goab-badge type="information" content="Complete"></goab-badge></td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td><goab-button type="tertiary" size="compact">Action</goab-button></td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
<goab-tab [heading]="reviewPending">
<ng-template #reviewPending>Review pending<goab-badge type="important" content="4" [icon]="false"></goab-badge></ng-template>
<goab-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><goab-badge type="important" content="Review pending"></goab-badge></td>
<td>Lorem ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td><goab-button type="tertiary" size="compact">Action</goab-button></td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
<goab-tab [heading]="completeTab">
<ng-template #completeTab>Complete<goab-badge type="information" content="338" [icon]="false"></goab-badge></ng-template>
<goab-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><goab-badge type="information" content="Complete"></goab-badge></td>
<td>Lorem Ipsum</td>
<td class="goa-table-number-column">1234567890</td>
<td><goab-button type="tertiary" size="compact">Action</goab-button></td>
</tr>
}
</tbody>
</goab-table>
</goab-tab>
</goab-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>Workspace
Preview not available
No React code available
Content
Don't
Don't truncate tab labels - use short labels instead.