Design system

Icon button

An icon-only button for common or repetitive actions.

Code playground

<GoAIconButton icon="refresh" ariaLabel="Refresh icon"></GoAIconButton>

Properties

icon

GoAIconType

Sets the icon.

variantcolor | light | dark | destructive

Styles the button to show color, light, dark or destructive action.
Defaults to color.

sizesmall | medium | large

Sets the size of button.
Defaults to medium.

titlestring

Sets the title of the button.

disabledboolean

Disables the button.
Defaults to false.

ariaLabelstring

Sets the aria-label of the button.

onClick(e: any) => void

Callback function when button is clicked.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Examples

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>

Design

Detailed design documentation for this component can be found on its component page in Figma.

Accessibility

Accessibility documentation for this component can be found on its component page in Figma.

More accessibility guidance for design and development is coming soon.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Playground

Properties

Show multiple actions in a compact table