Callout

Communicate important information through a strong visual emphasis.

Props

size
medium | large
Sets the size of the callout. 'medium' has reduced padding and type size for compact areas.
Defaults to large.
type
emergency | important | information | event | success
Define the context and colour of the callout.
emphasis
high | medium | low
Sets the visual prominence. 'high' for full background, 'medium' for subtle, 'low' for minimal.
Defaults to medium.
heading
string
Callout heading text.
maxWidth
string
Sets the maximum width of the callout.
Defaults to none.
testId
string
Sets a data-testid attribute for automated testing.
arialive
off | assertive | polite
Indicates how assistive technology should handle updates to the live region.
Defaults to off.
icontheme
IconTheme
Sets the icon theme. 'outline' for stroked icons, 'filled' for solid icons.
Defaults to outline.
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.
 Examples

Confirm that an application was submitted

<GoabText as="h1" mt="none">You have completed the application</GoabText>

      <GoabCallout type="success" heading="Your application was successful">
        <GoabText mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</GoabText>
        <GoabText mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></GoabText>
      </GoabCallout>

      <GoabText as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</GoabText>
      <GoabText>
        Other information about what was just completed, other tertiary information, and/or contact information.
        <br />
        Phone: <a href="tel:7801234567">780 123 4567</a>
        <br />
        Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
      </GoabText>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary">Go to application</GoabButton>
        <GoabButton type="secondary">Back to dashboard</GoabButton>
      </GoabButtonGroup>
<goab-text as="h1" mt="none">You have completed the application</goab-text>

<goab-callout type="success" heading="Your application was successful">
  <goab-text mt="none" mb="m">You will receive a copy of the confirmation to the email person&#64;email.com</goab-text>
  <goab-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goab-text>
</goab-callout>

<goab-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goab-text>
<goab-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br/>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br/>
Email: <a href="mailto:information@gov.ab.ca">information&#64;gov.ab.ca</a>
</goab-text>

<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary">Go to application</goab-button>
  <goab-button type="secondary">Back to dashboard</goab-button>
</goab-button-group>
<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Your application was successful">
  <goa-text mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</goa-text>
  <goa-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goa-text>
</goa-callout>

<goa-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goa-text>
<goa-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br>
Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
</goa-text>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary">Go to application</goa-button>
  <goa-button version="2" type="secondary">Back to dashboard</goa-button>
</goa-button-group>

Result page

<GoabText as="h1" mt="none">You have completed the application</GoabText>

      <GoabCallout type="success" heading="Application submitted">
        <GoabText size="body-m" mt="none" mb="s">You will receive a copy of the confirmation to the email name@email.com</GoabText>
        <GoabText size="body-m" mt="none" mb="none">Your reference number is: <strong>1234ABC</strong></GoabText>
      </GoabCallout>

      <GoabText as="h2" mt="xl" mb="m">What happens next</GoabText>
      <GoabText size="body-m" mt="none" mb="s">We've sent your application to service name. They will contact you to confirm your registration.</GoabText>
      <GoabText size="body-m" mt="none" mb="s">You can now close this window.</GoabText>
      <GoabText size="body-m" mt="none" mb="s">What did you think of this service? <a href="#">Give feedback</a></GoabText>

      <GoabText as="h2" mt="xl" mb="m">If you have questions about your application</GoabText>
      <GoabText size="body-m" mt="none" mb="s">Contact the [ministry area].</GoabText>
      <GoabText size="body-m" mt="none" mb="s">Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a></GoabText>
      <GoabText size="body-m" mt="none" mb="s">Phone: <a href="tel:7801234567">780 123 4567</a></GoabText>
  );
}
<goab-text as="h1" mt="none">You have completed the application</goab-text>

<goab-callout type="success" heading="Application submitted">
  <goab-text size="body-m" mt="none" mb="s">You will receive a copy of the confirmation to the email name&#64;email.com</goab-text>
  <goab-text size="body-m" mt="none" mb="none">Your reference number is: <strong>1234ABC</strong></goab-text>
</goab-callout>

<goab-text as="h2" mt="xl" mb="m">What happens next</goab-text>
<goab-text size="body-m" mt="none" mb="s">We've sent your application to service name. They will contact you to confirm your registration.</goab-text>
<goab-text size="body-m" mt="none" mb="s">You can now close this window.</goab-text>
<goab-text size="body-m" mt="none" mb="s">What did you think of this service? <a href="#">Give feedback</a></goab-text>

<goab-text as="h2" mt="xl" mb="m">If you have questions about your application</goab-text>
<goab-text size="body-m" mt="none" mb="s">Contact the [ministry area].</goab-text>
<goab-text size="body-m" mt="none" mb="s">Email: <a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a></goab-text>
<goab-text size="body-m" mt="none" mb="s">Phone: <a href="tel:7801234567">780 123 4567</a></goab-text>
<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Application submitted">
  <goa-text size="body-m" mt="none" mb="s">You will receive a copy of the confirmation to the email name@email.com</goa-text>
  <goa-text size="body-m" mt="none" mb="none">Your reference number is: <strong>1234ABC</strong></goa-text>
</goa-callout>

<goa-text as="h2" mt="xl" mb="m">What happens next</goa-text>
<goa-text size="body-m" mt="none" mb="s">We've sent your application to service name. They will contact you to confirm your registration.</goa-text>
<goa-text size="body-m" mt="none" mb="s">You can now close this window.</goa-text>
<goa-text size="body-m" mt="none" mb="s">What did you think of this service? <a href="#">Give feedback</a></goa-text>

<goa-text as="h2" mt="xl" mb="m">If you have questions about your application</goa-text>
<goa-text size="body-m" mt="none" mb="s">Contact the [ministry area].</goa-text>
<goa-text size="body-m" mt="none" mb="s">Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a></goa-text>
<goa-text size="body-m" mt="none" mb="s">Phone: <a href="tel:7801234567">780 123 4567</a></goa-text>

Task list page

<GoabText as="h1" mt="none">Apply for a service</GoabText>
      <GoabCallout
        type="important"
        emphasis="low"
        size="medium"
        heading="Application incomplete"
        mb="2xl"
        mt="xl"
        maxWidth="360px"
      >
        You have completed 1 of 3 sections.
      </GoabCallout>

      <GoabText as="h2">1. Before you start</GoabText>
      <GoabTable width="100%" mb="2xl" mt="l">
        <tbody>
          <tr>
            <td>
              <a href="#">Read terms of use</a>
            </td>
            <td className="goa-table-number-column">
              <GoabBadge type="success" content="Completed" ariaLabel="completed" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabTable>

      <GoabText as="h2">2. Prepare application</GoabText>
      <GoabTable width="100%" mb="2xl" mt="l">
        <tbody>
          <tr>
            <td>
              <a href="#">Your contact details</a>
            </td>
            <td className="goa-table-number-column">
              <GoabBadge 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">
              <GoabBadge 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">
              <GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabTable>

      <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>
      <GoabTable width="100%" mt="l" mb="3xl">
        <tbody>
          <tr>
            <td>Receive email confirmation</td>
            <td className="goa-table-number-column">
              <GoabBadge 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">
              <GoabBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabTable>
<goab-text as="h1" mt="none">Apply for a service</goab-text>
<goab-callout type="important" emphasis="low" size="medium" heading="Application incomplete" mb="2xl" mt="xl" maxWidth="360px">
  You have completed 1 of 3 sections.
</goab-callout>

<goab-text as="h2">1. Before you start</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Read terms of use</a></td>
      <td class="goa-table-number-column">
        <goab-badge type="success" content="Completed" ariaLabel="completed" [icon]="false"></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goab-text as="h2">2. Prepare application</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Your contact details</a></td>
      <td class="goa-table-number-column">
        <goab-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Your family</a></td>
      <td class="goa-table-number-column">
        <goab-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Verify your identity</a></td>
      <td class="goa-table-number-column">
        <goab-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-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>
<goab-table width="100%" mt="l" mb="3xl">
  <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td class="goa-table-number-column">
        <goab-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goab-badge>
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td class="goa-table-number-column">
        <goab-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-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>

Sizing

Provincial Family Resource Networks deliver high quality prevention and early intervention services.
Do
Use full width callouts with a maximum width of 700px.

This callout uses the medium size for mobile viewports.
Do
Use the medium callout on mobile to save space.

Content

Networks deliver high quality prevention and early intervention services. Find a network in your area.
Do
Use inline links when additional information exists on another page.

Employment standards set out the rights and obligations of employers and employees in Alberta. This includes the minimum standards that employers must provide. In this section, find out about Alberta’s basic employment standards, what to do if you think they are not being followed, and educational materials.
Don't
Don't include too much content. Callouts should communicate one important piece of information.

Submit your application by March 31, 2024 to be considered.
Do
Keep callouts focused on one key message

Other

Changes to employment standards rules are in effect.
Don't
Don't allow callouts to be dismissed.

The username you entered did not match our records.
Don't
Don't use callouts for form or field validation. Use error messages instead.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.
View old component docs