Playground
<GoAIconButton icon="refresh" ariaLabel="Refresh icon"></GoAIconButton>
Properties
icon
GoAIconType
Sets the icon.
variant
color | light | dark | destructive
Styles the button to show color, light, dark or destructive action.
Defaults to
Defaults to
color
.size
small | medium | large
Sets the size of button.
Defaults to
Defaults to
medium
.title
string
Sets the title of the button.
disabled
boolean
Disables the button.
Defaults to
Defaults to
false
.ariaLabel
string
Sets the aria-label of the button.
onClick
(e: any) => void
Callback function when button is clicked.
testId
string
Sets the data-testid attribute. Used with ByTestId queries in tests.
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.
Status | Name | Id Number | Edit | Flag | Send | |
---|---|---|---|---|
Darlene Robertson | 45904 | |||
Floyd Miles | 47838 | |||
Kathryn Murphy | 34343 | |||
Annette Black | 89897 | |||
Esther Howard | 12323 | |||
Jane Cooper | 56565 |
<GoATable width="100%">
<thead>
<tr>
<th>
Status
</th>
<th>
Name
</th>
<th>
Id Number
</th>
<th>
Edit | Flag | Send
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<GoABadge type="information" content="In progress"></GoABadge>
</td>
<td>
Darlene Robertson
</td>
<td className="goa-table-number-column">
45904
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoABadge type="dark" content="Inactive"></GoABadge>
</td>
<td>
Floyd Miles
</td>
<td className="goa-table-number-column">
47838
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoABadge type="success" content="Active"></GoABadge>
</td>
<td>
Kathryn Murphy
</td>
<td className="goa-table-number-column">
34343
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoABadge type="important" content="Recent"></GoABadge>
</td>
<td>
Annette Black
</td>
<td className="goa-table-number-column">
89897
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoABadge type="success" content="Active"></GoABadge>
</td>
<td>
Esther Howard
</td>
<td className="goa-table-number-column">
12323
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
<tr>
<td>
<GoABadge type="success" content="Active"></GoABadge>
</td>
<td>
Jane Cooper
</td>
<td className="goa-table-number-column">
56565
</td>
<td>
<GoABlock>
<GoAIconButton size="small" icon="pencil" ariaLabel="Edit"></GoAIconButton>
<GoAIconButton size="small" icon="flag" ariaLabel="Flag"></GoAIconButton>
<GoAIconButton size="small" icon="mail" ariaLabel="Send"></GoAIconButton>
</GoABlock>
</td>
<td></td>
</tr>
</tbody>
</GoATable>
Book time in drop in hours