Icon button

A compact button with an icon and no text.

Code examples

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

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.

Show multiple actions in a compact table

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 guidelines

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

Icon button

Component

A compact button with an icon and no text.

Component

Properties

Examples

Show multiple actions in a compact table