Badge
Small labels which hold small amounts of information, system feedback, or states.
Props
type
information | important | emergency | success | dark | midtone | light | archived | aqua | black | blue | green | orange | pink | red | violet | white | yellow | aqua-light | black-light | blue-light | green-light | orange-light | pink-light | red-light | violet-light | yellow-light | sky | prairie | lilac | pasture | sunset | dawn | default
Defines the context and colour of the badge.
testId
string
Sets a data-testid attribute for automated testing.
content
string
Text label of the badge.
icon
string
Use icontype instead. Includes an icon in the badge.
icontype
GoAIconType
Icon type to display in the badge.
ariaLabel
string
Accessible label for screen readers.
size
medium | large
Sets the size of the badge.
Defaults to
medium.
emphasis
Sets the visual emphasis. 'subtle' for less prominent, 'strong' for more emphasis.
Defaults to
strong.
minWidth
string
min-width value for the badge container (e.g. "20px", "var(--goa-space-m)").
justifyContent
center | flex-start | flex-end | space-between
justify-content value for the badge container.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Card view of case files
.case-file-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--goa-space-m);
}<GoabContainer mt="l">
<div className="case-file-row">
<GoabBlock direction="column" gap="2xs">
<GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</GoabText>
<GoabText size="body-s" mt="none" mb="none">Submitted: April 23, 2023</GoabText>
</GoabBlock>
<GoabBlock direction="row" gap="l" alignment="center">
<GoabxBadge type="midtone" content="Not started" />
<GoabxButton type="tertiary" size="compact">Start</GoabxButton>
</GoabBlock>
</div>
</GoabContainer>
<GoabContainer>
<div className="case-file-row">
<GoabBlock direction="column" gap="2xs">
<GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</GoabText>
<GoabText size="body-s" mt="none" mb="none">Submitted: April 9, 2022</GoabText>
</GoabBlock>
<GoabBlock direction="row" gap="l" alignment="center">
<GoabxBadge type="important" content="Information needed" />
<GoabxButton type="tertiary" size="compact">Edit</GoabxButton>
</GoabBlock>
</div>
</GoabContainer>
<GoabContainer>
<div className="case-file-row">
<GoabBlock direction="column" gap="2xs">
<GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</GoabText>
<GoabText size="body-s" mt="none" mb="none">Submitted: April 14, 2021</GoabText>
</GoabBlock>
<GoabBlock direction="row" gap="l" alignment="center">
<GoabxBadge type="success" content="Approved" />
<GoabxButton type="tertiary" size="compact">View</GoabxButton>
</GoabBlock>
</div>
</GoabContainer>.case-file-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--goa-space-m);
}<goab-container mt="l">
<div class="case-file-row">
<goab-block direction="column" gap="2xs">
<goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</goab-text>
<goab-text size="body-s" mt="none" mb="none">Submitted: April 23, 2023</goab-text>
</goab-block>
<goab-block direction="row" gap="l" alignment="center">
<goabx-badge type="midtone" content="Not started"></goabx-badge>
<goabx-button type="tertiary" size="compact">Start</goabx-button>
</goab-block>
</div>
</goab-container>
<goab-container>
<div class="case-file-row">
<goab-block direction="column" gap="2xs">
<goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</goab-text>
<goab-text size="body-s" mt="none" mb="none">Submitted: April 9, 2022</goab-text>
</goab-block>
<goab-block direction="row" gap="l" alignment="center">
<goabx-badge type="important" content="Information needed"></goabx-badge>
<goabx-button type="tertiary" size="compact">Edit</goabx-button>
</goab-block>
</div>
</goab-container>
<goab-container>
<div class="case-file-row">
<goab-block direction="column" gap="2xs">
<goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</goab-text>
<goab-text size="body-s" mt="none" mb="none">Submitted: April 14, 2021</goab-text>
</goab-block>
<goab-block direction="row" gap="l" alignment="center">
<goabx-badge type="success" content="Approved"></goabx-badge>
<goabx-button type="tertiary" size="compact">View</goabx-button>
</goab-block>
</div>
</goab-container>.case-file-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--goa-space-m);
}<goa-container mt="l">
<div class="case-file-row">
<goa-block direction="column" gap="2xs">
<goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</goa-text>
<goa-text size="body-s" mt="none" mb="none">Submitted: April 23, 2023</goa-text>
</goa-block>
<goa-block direction="row" gap="l" alignment="center">
<goa-badge version="2" type="midtone" content="Not started"></goa-badge>
<goa-button version="2" type="tertiary" size="compact">Start</goa-button>
</goa-block>
</div>
</goa-container>
<goa-container>
<div class="case-file-row">
<goa-block direction="column" gap="2xs">
<goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</goa-text>
<goa-text size="body-s" mt="none" mb="none">Submitted: April 9, 2022</goa-text>
</goa-block>
<goa-block direction="row" gap="l" alignment="center">
<goa-badge version="2" type="important" content="Information needed"></goa-badge>
<goa-button version="2" type="tertiary" size="compact">Edit</goa-button>
</goa-block>
</div>
</goa-container>
<goa-container>
<div class="case-file-row">
<goa-block direction="column" gap="2xs">
<goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</goa-text>
<goa-text size="body-s" mt="none" mb="none">Submitted: April 14, 2021</goa-text>
</goa-block>
<goa-block direction="row" gap="l" alignment="center">
<goa-badge version="2" type="success" content="Approved"></goa-badge>
<goa-button version="2" type="tertiary" size="compact">View</goa-button>
</goa-block>
</div>
</goa-container>Expand or collapse part of a form
dl.accordion-example {
margin: 0 0;
}
.accordion-example dt {
color: var(--goa-color-text-default);
font: var(--goa-typography-heading-s);
margin-bottom: var(--goa-space-xs);
}
.accordion-example dd {
margin: 0 0 var(--goa-space-l);
font: var(--goa-typography-body-m);
}
.accordion-example dd:last-of-type {
margin-bottom: 0;
}<GoabText as="h3" mt="none" mb="m">Review your application</GoabText>
<GoabAccordion
heading="Referral details"
headingContent={<GoabxBadge type="important" content="Updated" />}>
<dl className="accordion-example">
<dt>Date of referral</dt>
<dd>January 27, 2021</dd>
<dt>Work safety concerns</dt>
<dd>None</dd>
<dt>Type of referral</dt>
<dd>Word of mouth, internet search</dd>
<dt>Intake received from another site</dt>
<dd>Yes</dd>
</dl>
</GoabAccordion>
<GoabAccordion heading="Contact information">
<dl className="accordion-example">
<dt>Name</dt>
<dd>Joan Smith</dd>
<dt>Contact preference</dt>
<dd>Text message</dd>
</dl>
</GoabAccordion>dl.accordion-example {
margin: 0 0;
}
.accordion-example dt {
color: var(--goa-color-text-default);
font: var(--goa-typography-heading-s);
margin-bottom: var(--goa-space-xs);
}
.accordion-example dd {
margin: 0 0 var(--goa-space-l);
font: var(--goa-typography-body-m);
}
.accordion-example dd:last-of-type {
margin-bottom: 0;
}// No logic required for this static example<goab-text as="h3" mt="none" mb="m">Review your application</goab-text>
<goab-accordion heading="Referral details" [headingContent]="importantBadge">
<ng-template #importantBadge>
<goabx-badge type="important" content="Updated"></goabx-badge>
</ng-template>
<dl class="accordion-example">
<dt>Date of referral</dt>
<dd>January 27, 2021</dd>
<dt>Work safety concerns</dt>
<dd>None</dd>
<dt>Type of referral</dt>
<dd>Word of mouth, internet search</dd>
<dt>Intake received from another site</dt>
<dd>Yes</dd>
</dl>
</goab-accordion>
<goab-accordion heading="Contact information">
<dl class="accordion-example">
<dt>Name</dt>
<dd>Joan Smith</dd>
<dt>Contact preference</dt>
<dd>Text message</dd>
</dl>
</goab-accordion>dl.accordion-example {
margin: 0 0;
}
.accordion-example dt {
color: var(--goa-color-text-default);
font: var(--goa-typography-heading-s);
margin-bottom: var(--goa-space-xs);
}
.accordion-example dd {
margin: 0 0 var(--goa-space-l);
font: var(--goa-typography-body-m);
}
.accordion-example dd:last-of-type {
margin-bottom: 0;
}<goa-text as="h3" mt="none" mb="m">Review your application</goa-text>
<goa-accordion heading="Referral details">
<goa-badge version="2" slot="headingcontent" type="important" content="Updated"></goa-badge>
<dl class="accordion-example">
<dt>Date of referral</dt>
<dd>January 27, 2021</dd>
<dt>Work safety concerns</dt>
<dd>None</dd>
<dt>Type of referral</dt>
<dd>Word of mouth, internet search</dd>
<dt>Intake received from another site</dt>
<dd>Yes</dd>
</dl>
</goa-accordion>
<goa-accordion heading="Contact information">
<dl class="accordion-example">
<dt>Name</dt>
<dd>Joan Smith</dd>
<dt>Contact preference</dt>
<dd>Text message</dd>
</dl>
</goa-accordion>Filter a list using a push drawer
const [open, setOpen] = useState(false);<div style={{ display: "flex", minHeight: "480px" }}>
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
display: "flex",
alignItems: "center",
gap: "1rem",
marginBottom: "1rem",
}}
>
<h3 style={{ flex: 1, margin: 0 }}>All cases</h3>
{!open && (
<GoabxButton
type="secondary"
size="compact"
leadingIcon="filter"
onClick={() => setOpen(true)}
>
Filters
</GoabxButton>
)}
</div>
<GoabxTable width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>File number</th>
<th>Act</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<GoabxBadge type="success" content="Completed" />
</td>
<td>Gilbert Barton</td>
<td>24567-9876</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td>
<GoabxBadge type="information" content="New" />
</td>
<td>Brynn Hurley</td>
<td>98765-3456</td>
<td>Trespass to premises act</td>
</tr>
<tr>
<td>
<GoabxBadge type="midtone" content="In review" />
</td>
<td>Marco Silva</td>
<td>34521-7890</td>
<td>Gaming, liquor, and cannabis act</td>
</tr>
<tr>
<td>
<GoabxBadge type="success" content="Completed" />
</td>
<td>Dana Chen</td>
<td>55123-4567</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td>
<GoabxBadge type="information" content="New" />
</td>
<td>Amira Hassan</td>
<td>67890-1234</td>
<td>Trespass to premises act</td>
</tr>
</tbody>
</table>
</GoabxTable>
</div>
<GoabxPushDrawer
heading="Filters"
width="260px"
open={open}
onClose={() => setOpen(false)}
>
<GoabxFormItem label="Act">
<GoabxCheckboxList name="act" onChange={() => {}}>
<GoabxCheckbox name="traffic" text="Traffic safety act" size="compact" />
<GoabxCheckbox
name="gaming"
text="Gaming, liquor, and cannabis act"
size="compact"
/>
<GoabxCheckbox
name="trespass"
text="Trespass to premises act"
size="compact"
/>
</GoabxCheckboxList>
</GoabxFormItem>
<GoabxFormItem label="Status" mt="l">
<GoabxDropdown name="status" onChange={() => {}} value="" size="compact">
<GoabxDropdownItem value="" label="All statuses" />
<GoabxDropdownItem value="new" label="New" />
<GoabxDropdownItem value="in-review" label="In review" />
<GoabxDropdownItem value="completed" label="Completed" />
</GoabxDropdown>
</GoabxFormItem>
</GoabxPushDrawer>
</div>const filtersDrawer = document.getElementById("filters-drawer");
const openFiltersBtn = document.getElementById("open-filters-btn");
openFiltersBtn.addEventListener("_click", () => {
filtersDrawer.setAttribute("open", "true");
openFiltersBtn.style.display = "none";
});
filtersDrawer.addEventListener("_close", () => {
filtersDrawer.removeAttribute("open");
openFiltersBtn.style.display = "";
});<div style="display: flex; min-height: 480px">
<div style="flex: 1; min-width: 0">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem">
<h3 style="flex: 1; margin: 0">All cases</h3>
<goa-button
version="2"
id="open-filters-btn"
type="secondary"
size="compact"
leadingicon="filter"
>Filters</goa-button
>
</div>
<goa-table version="2" width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>File number</th>
<th>Act</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<goa-badge version="2" type="success" content="Completed"></goa-badge>
</td>
<td>Gilbert Barton</td>
<td>24567-9876</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goa-badge version="2" type="information" content="New"></goa-badge></td>
<td>Brynn Hurley</td>
<td>98765-3456</td>
<td>Trespass to premises act</td>
</tr>
<tr>
<td>
<goa-badge version="2" type="midtone" content="In review"></goa-badge>
</td>
<td>Marco Silva</td>
<td>34521-7890</td>
<td>Gaming, liquor, and cannabis act</td>
</tr>
<tr>
<td>
<goa-badge version="2" type="success" content="Completed"></goa-badge>
</td>
<td>Dana Chen</td>
<td>55123-4567</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goa-badge version="2" type="information" content="New"></goa-badge></td>
<td>Amira Hassan</td>
<td>67890-1234</td>
<td>Trespass to premises act</td>
</tr>
</tbody>
</table>
</goa-table>
</div>
<goa-push-drawer version="2" id="filters-drawer" heading="Filters" width="260px">
<goa-form-item version="2" label="Act">
<goa-checkbox-list name="act">
<goa-checkbox
version="2"
name="traffic"
text="Traffic safety act"
size="compact"
></goa-checkbox>
<goa-checkbox
version="2"
name="gaming"
text="Gaming, liquor, and cannabis act"
size="compact"
></goa-checkbox>
<goa-checkbox
version="2"
name="trespass"
text="Trespass to premises act"
size="compact"
></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>
<goa-form-item version="2" label="Status" mt="l">
<goa-dropdown version="2" name="status" size="compact">
<goa-dropdown-item value="" label="All statuses"></goa-dropdown-item>
<goa-dropdown-item value="new" label="New"></goa-dropdown-item>
<goa-dropdown-item value="in-review" label="In review"></goa-dropdown-item>
<goa-dropdown-item value="completed" label="Completed"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
</goa-push-drawer>
</div>Filter data in a table
const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");
const [inputError, setInputError] = useState("");
const errorEmpty = "Empty filter";
const errorDuplicate = "Enter a unique filter";
const data = useMemo(
() => [
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Ivan Schmidt",
id: "7838576954",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Luz Lakin",
id: "8576953364",
},
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Keith McGlynn",
id: "9846041345",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Melody Frami",
id: "7385256175",
},
{
status: { type: "important" as GoabBadgeType, text: "Updated" },
name: "Frederick Skiles",
id: "5807570418",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Dana Pfannerstill",
id: "5736306857",
},
],
[]
);
const [dataFiltered, setDataFiltered] = useState(data);
const handleInputChange = (detail: GoabInputOnChangeDetail) => {
const newValue = detail.value.trim();
setInputValue(newValue);
};
const handleInputKeyPress = (detail: GoabInputOnKeyPressDetail) => {
if (detail.key === "Enter") {
applyFilter();
}
};
const applyFilter = () => {
if (inputValue === "") {
setInputError(errorEmpty);
return;
}
if (typedChips.length > 0 && typedChips.includes(inputValue)) {
setInputError(errorDuplicate);
return;
}
setTypedChips([...typedChips, inputValue]);
setTimeout(() => {
setInputValue("");
}, 0);
setInputError("");
};
const removeTypedChip = (chip: string) => {
setTypedChips(typedChips.filter(c => c !== chip));
setInputError("");
};
const checkNested = useCallback((obj: object, chip: string): boolean => {
return Object.values(obj).some(value =>
typeof value === "object" && value !== null
? checkNested(value, chip)
: typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase())
);
}, []);
const getFilteredData = useCallback(
(typedChips: string[]) => {
if (typedChips.length === 0) {
return data;
}
return data.filter((item: object) =>
typedChips.every(chip => checkNested(item, chip))
);
},
[checkNested, data]
);
useEffect(() => {
setDataFiltered(getFilteredData(typedChips));
}, [getFilteredData, typedChips]);<GoabxFormItem id="filterChipInput" error={inputError} mb="m">
<GoabBlock gap="xs" direction="row" alignment="start" width="100%">
<div style={{ flex: 1 }}>
<GoabxInput
name="filterChipInput"
aria-labelledby="filterChipInput"
value={inputValue}
leadingIcon="search"
width="100%"
onChange={handleInputChange}
onKeyPress={handleInputKeyPress}
/>
</div>
<GoabxButton type="secondary" onClick={applyFilter} leadingIcon="filter">
Filter
</GoabxButton>
</GoabBlock>
</GoabxFormItem>
{typedChips.length > 0 && (
<div>
<GoabText tag="span" color="secondary" mb="xs" mr="xs">
Filter:
</GoabText>
{typedChips.map((typedChip, index) => (
<GoabxFilterChip
key={index}
content={typedChip}
mb="xs"
mr="xs"
onClick={() => removeTypedChip(typedChip)}
/>
))}
<GoabxButton type="tertiary" size="compact" mb="xs" onClick={() => setTypedChips([])}>
Clear all
</GoabxButton>
</div>
)}
<GoabxTable width="full">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
{dataFiltered.map(item => (
<tr key={item.id}>
<td>
<GoabxBadge type={item.status.type} content={item.status.text} icon={false} />
</td>
<td>{item.name}</td>
<td className="goa-table-number-column">{item.id}</td>
</tr>
))}
</tbody>
</GoabxTable>
{dataFiltered.length === 0 && data.length > 0 && (
<GoabBlock mt="l" mb="l">
No results found
</GoabBlock>
)}typedChips: string[] = [];
inputValue = "";
inputError = "";
readonly errorEmpty = "Empty filter";
readonly errorDuplicate = "Enter a unique filter";
readonly data: DataItem[] = [
{
status: { type: "information", text: "In progress" },
name: "Ivan Schmidt",
id: "7838576954",
},
{
status: { type: "success", text: "Completed" },
name: "Luz Lakin",
id: "8576953364",
},
{
status: { type: "information", text: "In progress" },
name: "Keith McGlynn",
id: "9846041345",
},
{
status: { type: "success", text: "Completed" },
name: "Melody Frami",
id: "7385256175",
},
{
status: { type: "important", text: "Updated" },
name: "Frederick Skiles",
id: "5807570418",
},
{
status: { type: "success", text: "Completed" },
name: "Dana Pfannerstill",
id: "5736306857",
},
];
dataFiltered = this.getFilteredData(this.typedChips);
handleInputChange(detail: GoabInputOnChangeDetail): void {
const newValue = detail.value.trim();
this.inputValue = newValue;
}
handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
if (detail.key === "Enter") {
this.applyFilter();
}
}
applyFilter(): void {
if (this.inputValue === "") {
this.inputError = this.errorEmpty;
return;
}
if (this.typedChips.includes(this.inputValue)) {
this.inputError = this.errorDuplicate;
return;
}
this.typedChips = [...this.typedChips, this.inputValue];
this.inputValue = "";
this.inputError = "";
this.dataFiltered = this.getFilteredData(this.typedChips);
}
removeTypedChip(chip: string): void {
this.typedChips = this.typedChips.filter(c => c !== chip);
this.dataFiltered = this.getFilteredData(this.typedChips);
this.inputError = "";
}
removeAllTypedChips(): void {
this.typedChips = [];
this.dataFiltered = this.getFilteredData(this.typedChips);
this.inputError = "";
}
getFilteredData(typedChips: string[]): DataItem[] {
if (typedChips.length === 0) {
return this.data;
}
return this.data.filter(item =>
typedChips.every(chip => this.checkNested(item, chip))
);
}
checkNested(obj: object, chip: string): boolean {
return Object.values(obj).some(value =>
typeof value === "object" && value !== null
? this.checkNested(value, chip)
: typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase())
);
}<goabx-form-item id="filterChipInput" [error]="inputError" mb="m">
<goab-block gap="xs" direction="row" alignment="start" width="100%">
<div style="flex: 1">
<goabx-input
name="filterChipInput"
aria-labelledby="filterChipInput"
[value]="inputValue"
leadingIcon="search"
width="100%"
(onChange)="handleInputChange($event)"
(onKeyPress)="handleInputKeyPress($event)"
>
</goabx-input>
</div>
<goabx-button type="secondary" (onClick)="applyFilter()" leadingIcon="filter">
Filter
</goabx-button>
</goab-block>
</goabx-form-item>
@if (typedChips.length > 0) {
<ng-container>
<goab-text tag="span" color="secondary" mb="xs" mr="xs"> Filter: </goab-text>
@for (typedChip of typedChips; track typedChip; let index = $index) {
<goabx-filter-chip
[content]="typedChip"
mb="xs"
mr="xs"
(onClick)="removeTypedChip(typedChip)"
>
</goabx-filter-chip>
}
<goabx-button type="tertiary" size="compact" mb="xs" (onClick)="removeAllTypedChips()">
Clear all
</goabx-button>
</ng-container>
}
<goabx-table width="full">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
@for (item of dataFiltered; track $index) {
<tr>
<td>
<goabx-badge
[type]="item.status.type"
[content]="item.status.text"
[icon]="false"
></goabx-badge>
</td>
<td>{{ item.name }}</td>
<td class="goa-table-number-column">{{ item.id }}</td>
</tr>
}
</tbody>
</goabx-table>
@if (dataFiltered.length === 0 && data.length > 0) {
<goab-block mt="l" mb="l"> No results found </goab-block>
}const filterInput = document.getElementById('filter-input');
const filterBtn = document.getElementById('filter-btn');
const filterFormItem = document.getElementById('filter-form-item');
const chipsContainer = document.getElementById('chips-container');
const chipsList = document.getElementById('chips-list');
const clearAllBtn = document.getElementById('clear-all-btn');
const tableRows = document.querySelectorAll('tbody tr');
let typedChips = [];
function filterTable() {
tableRows.forEach(row => {
const badge = row.querySelector('goa-badge');
const badgeText = badge ? badge.getAttribute('content') || '' : '';
const text = (row.textContent + ' ' + badgeText).toLowerCase();
const matches = typedChips.length === 0 || typedChips.every(chip => text.includes(chip.toLowerCase()));
row.style.display = matches ? '' : 'none';
});
}
function renderChips() {
chipsList.innerHTML = '';
typedChips.forEach(chip => {
const filterChip = document.createElement('goa-filter-chip');
filterChip.setAttribute('version', '2');
filterChip.setAttribute('content', chip);
filterChip.setAttribute('mb', 'xs');
filterChip.setAttribute('mr', 'xs');
filterChip.addEventListener('_click', () => removeChip(chip));
chipsList.appendChild(filterChip);
});
chipsContainer.style.display = typedChips.length > 0 ? 'block' : 'none';
filterTable();
}
function applyFilter() {
const value = filterInput.value.trim();
if (value === '') {
filterFormItem.setAttribute('error', 'Empty filter');
return;
}
if (typedChips.includes(value)) {
filterFormItem.setAttribute('error', 'Enter a unique filter');
return;
}
typedChips.push(value);
filterInput.value = '';
filterFormItem.removeAttribute('error');
renderChips();
}
function removeChip(chip) {
typedChips = typedChips.filter(c => c !== chip);
renderChips();
}
filterBtn.addEventListener('_click', applyFilter);
clearAllBtn.addEventListener('_click', () => {
typedChips = [];
renderChips();
});<goa-form-item version="2" id="filter-form-item" mb="m">
<goa-block gap="xs" direction="row" alignment="center" width="100%">
<div style="flex: 1;">
<goa-input version="2"
id="filter-input"
name="filterChipInput"
leadingicon="search"
width="100%">
</goa-input>
</div>
<goa-button version="2" id="filter-btn" type="secondary" leadingicon="filter">
Filter
</goa-button>
</goa-block>
</goa-form-item>
<div id="chips-container" style="display: none;">
<goa-text tag="span" color="secondary" mb="xs" mr="xs">Filter:</goa-text>
<span id="chips-list"></span>
<goa-button version="2" id="clear-all-btn" type="tertiary" size="compact" mb="xs">
Clear all
</goa-button>
</div>
<goa-table version="2" width="100%" mt="s">
<table style="width: 100%;">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
<tr>
<td><goa-badge version="2" type="information" content="In progress" icon="false"></goa-badge></td>
<td>Ivan Schmidt</td>
<td class="goa-table-number-column">7838576954</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Completed" icon="false"></goa-badge></td>
<td>Luz Lakin</td>
<td class="goa-table-number-column">8576953364</td>
</tr>
<tr>
<td><goa-badge version="2" type="information" content="In progress" icon="false"></goa-badge></td>
<td>Keith McGlynn</td>
<td class="goa-table-number-column">9846041345</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Completed" icon="false"></goa-badge></td>
<td>Melody Frami</td>
<td class="goa-table-number-column">7385256175</td>
</tr>
<tr>
<td><goa-badge version="2" type="important" content="Updated" icon="false"></goa-badge></td>
<td>Frederick Skiles</td>
<td class="goa-table-number-column">5807570418</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Completed" icon="false"></goa-badge></td>
<td>Dana Pfannerstill</td>
<td class="goa-table-number-column">5736306857</td>
</tr>
</tbody>
</table>
</goa-table>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>Show multiple actions in a compact table
const rows = [
{ status: "information", statusText: "In progress", name: "Darlene Robertson", id: 45904 },
{ status: "dark", statusText: "Inactive", name: "Floyd Miles", id: 47838 },
{ status: "success", statusText: "Active", name: "Kathryn Murphy", id: 34343 },
{ status: "important", statusText: "Recent", name: "Annette Black", id: 89897 },
{ status: "success", statusText: "Active", name: "Esther Howard", id: 12323 },
{ status: "success", statusText: "Active", name: "Jane Cooper", id: 56565 },
];<GoabxTable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th style={{ textAlign: "right" }}>Id Number</th>
<th style={{ width: "1%", whiteSpace: "nowrap" }}>Edit | Flag | Send</th>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id}>
<td>
<GoabxBadge
type={row.status as "information" | "dark" | "success" | "important"}
content={row.statusText}
icon={false}
/>
</td>
<td>{row.name}</td>
<td className="goa-table-number-column">{row.id}</td>
<td>
<GoabBlock>
<GoabIconButton size="small" icon="pencil" ariaLabel="Edit" />
<GoabIconButton size="small" icon="flag" ariaLabel="Flag" />
<GoabIconButton size="small" icon="mail" ariaLabel="Send" />
</GoabBlock>
</td>
</tr>
))}
</tbody>
</GoabxTable>rows: TableRow[] = [
{ status: "information", statusText: "In progress", name: "Darlene Robertson", id: 45904 },
{ status: "dark", statusText: "Inactive", name: "Floyd Miles", id: 47838 },
{ status: "success", statusText: "Active", name: "Kathryn Murphy", id: 34343 },
{ status: "important", statusText: "Recent", name: "Annette Black", id: 89897 },
{ status: "success", statusText: "Active", name: "Esther Howard", id: 12323 },
{ status: "success", statusText: "Active", name: "Jane Cooper", id: 56565 },
];<goabx-table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th style="text-align: right">Id Number</th>
<th style="width: 1%; white-space: nowrap">Edit | Flag | Send</th>
</tr>
</thead>
<tbody>
@for (row of rows; track row.id) {
<tr>
<td>
<goabx-badge [type]="row.status" [content]="row.statusText" [icon]="false"></goabx-badge>
</td>
<td>{{ row.name }}</td>
<td class="goa-table-number-column">{{ row.id }}</td>
<td>
<goab-block>
<goab-icon-button size="small" icon="pencil" ariaLabel="Edit"></goab-icon-button>
<goab-icon-button size="small" icon="flag" ariaLabel="Flag"></goab-icon-button>
<goab-icon-button size="small" icon="mail" ariaLabel="Send"></goab-icon-button>
</goab-block>
</td>
</tr>
}
</tbody>
</goabx-table><goa-table version="2" width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th style="text-align: right">Id Number</th>
<th style="width: 1%; white-space: nowrap">Edit | Flag | Send</th>
</tr>
</thead>
<tbody>
<tr>
<td><goa-badge version="2" type="information" content="In progress" icon="false"></goa-badge></td>
<td>Darlene Robertson</td>
<td class="goa-table-number-column">45904</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
<tr>
<td><goa-badge version="2" type="dark" content="Inactive" icon="false"></goa-badge></td>
<td>Floyd Miles</td>
<td class="goa-table-number-column">47838</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Active" icon="false"></goa-badge></td>
<td>Kathryn Murphy</td>
<td class="goa-table-number-column">34343</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
<tr>
<td><goa-badge version="2" type="important" content="Recent" icon="false"></goa-badge></td>
<td>Annette Black</td>
<td class="goa-table-number-column">89897</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Active" icon="false"></goa-badge></td>
<td>Esther Howard</td>
<td class="goa-table-number-column">12323</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
<tr>
<td><goa-badge version="2" type="success" content="Active" icon="false"></goa-badge></td>
<td>Jane Cooper</td>
<td class="goa-table-number-column">56565</td>
<td>
<goa-block>
<goa-icon-button size="small" icon="pencil" arialabel="Edit"></goa-icon-button>
<goa-icon-button size="small" icon="flag" arialabel="Flag"></goa-icon-button>
<goa-icon-button size="small" icon="mail" arialabel="Send"></goa-icon-button>
</goa-block>
</td>
</tr>
</tbody>
</table>
</goa-table>Show multiple tags together
<GoabBlock gap="xs">
<GoabxBadge type="information" content="In progress" />
<GoabxBadge type="important" content="Priority" />
<GoabxBadge type="emergency" content="Past deadline" />
</GoabBlock><goab-block gap="xs">
<goabx-badge type="information" content="In progress"></goabx-badge>
<goabx-badge type="important" content="Priority"></goabx-badge>
<goabx-badge type="emergency" content="Past deadline"></goabx-badge>
</goab-block><goa-block gap="xs">
<goa-badge version="2" type="information" content="In progress"></goa-badge>
<goa-badge version="2" type="important" content="Priority"></goa-badge>
<goa-badge version="2" type="emergency" content="Past deadline"></goa-badge>
</goa-block>Show status in a table
interface BadgeValue {
key: number;
type: GoabBadgeType;
content: string;
}
const badgeValues: BadgeValue[] = [
{ key: 1, type: "important", content: "Pending" },
{ key: 2, type: "emergency", content: "Failed" },
{ key: 3, type: "success", content: "Complete" },
{ key: 4, type: "information", content: "In progress" },
{ key: 5, type: "midtone", content: "Closed" },
{ key: 6, type: "success", content: "Complete" },
];
const handleClick = () => {
console.log("clicked");
};<GoabxTable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">File number</th>
<th style={{ width: "1%", whiteSpace: "nowrap" }}></th>
</tr>
</thead>
<tbody>
{badgeValues.map((badge) => (
<tr key={badge.key}>
<td>
<GoabxBadge type={badge.type} content={badge.content} icon={false} />
</td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td className="goa-table-number-column">1234567890</td>
<td>
<GoabxButton size="compact" type="tertiary" onClick={handleClick}>
Assign
</GoabxButton>
</td>
</tr>
))}
</tbody>
</GoabxTable>badgeValues: BadgeValue[] = [
{ type: "important", content: "Pending" },
{ type: "emergency", content: "Failed" },
{ type: "success", content: "Complete" },
{ type: "information", content: "In progress" },
{ type: "midtone", content: "Closed" },
{ type: "success", content: "Complete" },
];
onClick(): void {
console.log("clicked");
}<goabx-table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">File number</th>
<th style="width: 1%; white-space: nowrap"></th>
</tr>
</thead>
<tbody>
@for (badge of badgeValues; track $index) {
<tr>
<td>
<goabx-badge [type]="badge.type" [content]="badge.content" [icon]="false"></goabx-badge>
</td>
<td>Lorem ipsum dolor sit amet consectetur.</td>
<td class="goa-table-number-column">1234567890</td>
<td>
<goabx-button size="compact" type="tertiary" (onClick)="onClick()">Assign</goabx-button>
</td>
</tr>
}
</tbody>
</goabx-table>const badgeValues = [
{ type: "important", content: "Pending" },
{ type: "emergency", content: "Failed" },
{ type: "success", content: "Complete" },
{ type: "information", content: "In progress" },
{ type: "midtone", content: "Closed" },
{ type: "success", content: "Complete" },
];
const tbody = document.getElementById("table-body");
badgeValues.forEach((badge) => {
const row = document.createElement("tr");
row.innerHTML = `
<td><goa-badge version="2" type="${badge.type}" content="${badge.content}" icon="false"></goa-badge></td>
<td>Lorem ipsum dolor sit amet consectetur</td>
<td class="goa-table-number-column">1234567890</td>
<td><goa-button version="2" size="compact" type="tertiary">Assign</goa-button></td>
`;
const button = row.querySelector("goa-button");
button.addEventListener("_click", () => console.log("clicked"));
tbody.appendChild(row);
});<goa-table version="2" width="100%" id="status-table">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">File number</th>
<th style="width: 1%; white-space: nowrap"></th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</goa-table>Show status on a card
<GoabContainer
type="non-interactive"
accent="thick"
heading="Heading"
actions={<GoabxBadge type="important" content="Priority" />}
>
Content
</GoabContainer><goab-container type="non-interactive" accent="thick" [title]="title" [actions]="actions">
<ng-template #title>Heading</ng-template>
<ng-template #actions>
<goabx-badge type="important" content="Priority"></goabx-badge>
</ng-template>
Content
</goab-container><goa-container type="non-interactive" accent="thick">
<div slot="title">Heading</div>
<div slot="actions">
<goa-badge version="2" type="important" content="Priority"></goa-badge>
</div>
Content
</goa-container>Task list page
<GoabText as="h1" mt="none">Apply for a service</GoabText>
<GoabxCallout
type="important"
emphasis="low"
size="medium"
heading="Application incomplete"
mb="2xl"
mt="xl"
maxWidth="360px"
>
You have completed 1 of 3 sections.
</GoabxCallout>
<GoabText as="h2">1. Before you start</GoabText>
<GoabxTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Read terms of use</a>
</td>
<td className="goa-table-number-column">
<GoabxBadge type="success" content="Completed" ariaLabel="completed" icon={false} />
</td>
</tr>
</tbody>
</GoabxTable>
<GoabText as="h2">2. Prepare application</GoabText>
<GoabxTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Your contact details</a>
</td>
<td className="goa-table-number-column">
<GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Your family</a>
</td>
<td className="goa-table-number-column">
<GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Verify your identity</a>
</td>
<td className="goa-table-number-column">
<GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
</tbody>
</GoabxTable>
<GoabText as="h2" mb="s">3. Schedule service</GoabText>
<GoabText size="body-s" color="secondary" mt="2xs">
You need to complete the previous section before you can start this task.
</GoabText>
<GoabxTable width="100%" mt="l" mb="3xl">
<tbody>
<tr>
<td>Receive email confirmation</td>
<td className="goa-table-number-column">
<GoabxBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
<tr>
<td>Pay service fee</td>
<td className="goa-table-number-column">
<GoabxBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
</tbody>
</GoabxTable><goab-text as="h1" mt="none">Apply for a service</goab-text>
<goabx-callout type="important" emphasis="low" size="medium" heading="Application incomplete" mb="2xl" mt="xl" maxWidth="360px">
You have completed 1 of 3 sections.
</goabx-callout>
<goab-text as="h2">1. Before you start</goab-text>
<goabx-table width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td><a href="#">Read terms of use</a></td>
<td class="goa-table-number-column">
<goabx-badge type="success" content="Completed" ariaLabel="completed" [icon]="false"></goabx-badge>
</td>
</tr>
</tbody>
</goabx-table>
<goab-text as="h2">2. Prepare application</goab-text>
<goabx-table width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td><a href="#">Your contact details</a></td>
<td class="goa-table-number-column">
<goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
</td>
</tr>
<tr>
<td><a href="#">Your family</a></td>
<td class="goa-table-number-column">
<goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
</td>
</tr>
<tr>
<td><a href="#">Verify your identity</a></td>
<td class="goa-table-number-column">
<goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
</td>
</tr>
</tbody>
</goabx-table>
<goab-text as="h2" mb="s">3. Schedule service</goab-text>
<goab-text size="body-s" color="secondary" mt="2xs">You need to complete the previous section before you can start this task.</goab-text>
<goabx-table width="100%" mt="l" mb="3xl">
<tbody>
<tr>
<td>Receive email confirmation</td>
<td class="goa-table-number-column">
<goabx-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goabx-badge>
</td>
</tr>
<tr>
<td>Pay service fee</td>
<td class="goa-table-number-column">
<goabx-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goabx-badge>
</td>
</tr>
</tbody>
</goabx-table><goa-text as="h1" mt="none">Apply for a service</goa-text>
<goa-callout version="2" type="important" emphasis="low" size="medium" heading="Application incomplete" mb="2xl" mt="xl" maxwidth="360px">
You have completed 1 of 3 sections.
</goa-callout>
<goa-text as="h2">1. Before you start</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
<table style="width: 100%;">
<tbody>
<tr>
<td><a href="#">Read terms of use</a></td>
<td class="goa-table-number-column">
<goa-badge version="2" type="success" content="Completed" aria-label="completed" icon="false"></goa-badge>
</td>
</tr>
</tbody>
</table>
</goa-table>
<goa-text as="h2">2. Prepare application</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
<table style="width: 100%;">
<tbody>
<tr>
<td><a href="#">Your contact details</a></td>
<td class="goa-table-number-column">
<goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
</td>
</tr>
<tr>
<td><a href="#">Your family</a></td>
<td class="goa-table-number-column">
<goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
</td>
</tr>
<tr>
<td><a href="#">Verify your identity</a></td>
<td class="goa-table-number-column">
<goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
</td>
</tr>
</tbody>
</table>
</goa-table>
<goa-text as="h2" mb="s">3. Schedule service</goa-text>
<goa-text size="body-s" color="secondary" mt="2xs">You need to complete the previous section before you can start this task.</goa-text>
<goa-table version="2" width="100%" mt="l" mb="3xl">
<table style="width: 100%;">
<tbody>
<tr>
<td>Receive email confirmation</td>
<td class="goa-table-number-column">
<goa-badge version="2" type="light" content="Cannot start yet" aria-label="cannot start yet" icon="false"></goa-badge>
</td>
</tr>
<tr>
<td>Pay service fee</td>
<td class="goa-table-number-column">
<goa-badge version="2" type="light" content="Cannot start yet" aria-label="cannot start yet" icon="false"></goa-badge>
</td>
</tr>
</tbody>
</table>
</goa-table>Workspace
Preview not available
No React code available
Other
Don't
Don't use a primary button to edit a badge.
Do
Use badges for information and organization, not interactivity.
Do
Use a tertiary button next to a badge if it needs to be manually updated.
Types
Don't
Don't style badges to look like buttons.
Don't
Don't use interactive colours. These are reserved for links, buttons, and other interactive elements.
Do
Match badge type to the status it represents
Content
Do
Use sentence case for badge text. Capitalize the first word only.
Do
Use short, concise text in badges.
Screen Readers
Icon-only interactive elements must have an accessible label so screen reader users understand their purpose.
For IconButton: The ariaLabel prop is required.
// Good - describes the action
<GoabIconButton icon="trash" ariaLabel="Delete item" />
// Bad - no label for screen readers
<GoabIconButton icon="trash" />For Badge with icon only: Provide ariaLabel when there’s no visible text.
<GoabBadge icon="warning" ariaLabel="Warning" type="important" />For Icon: Use ariaLabel when the icon conveys meaning, not just decoration.
The label should describe:
- What action happens (for buttons): “Delete”, “Edit”, “Close”
- What the icon represents (for informational icons): “Warning”, “Success”
Don't
Don't use icon-only elements without an accessible label