Alert

<afp-alert>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A dismissible alert component that can also appear as a toast notification.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.

<afp-alert open>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</afp-alert>

<afp-alert open>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</afp-alert>

<AfpAlert open>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</AfpAlert>

<AfpAlert open>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</AfpAlert>

Examples #

Variants #

Use the variant attribute to set the alert's semantic variant.

Neutral information alert

Brand information alert

Accent information alert

Info information alert

Error information alert

Success information alert

Warning information alert

<div class="afp-grid">
  <afp-alert variant="neutral" open>Neutral information alert</afp-alert>
  <afp-alert variant="brand" open>Brand information alert</afp-alert>
  <afp-alert variant="accent" open>Accent information alert</afp-alert>
  <afp-alert variant="info" open>Info information alert</afp-alert>
  <afp-alert variant="error" open>Error information alert</afp-alert>
  <afp-alert variant="success" open>Success information alert</afp-alert>
  <afp-alert variant="warning" open>Warning information alert</afp-alert>
</div>

<div class="afp-grid">
  <afp-alert [variant]="'neutral'" open>Neutral information alert</afp-alert>
  <afp-alert [variant]="'brand'" open>Brand information alert</afp-alert>
  <afp-alert [variant]="'accent'" open>Accent information alert</afp-alert>
  <afp-alert [variant]="'info'" open>Info information alert</afp-alert>
  <afp-alert [variant]="'error'" open>Error information alert</afp-alert>
  <afp-alert [variant]="'success'" open>Success information alert</afp-alert>
  <afp-alert [variant]="'warning'" open>Warning information alert</afp-alert>
</div>

<div class="afp-grid">
  <AfpAlert variant="neutral" open>Neutral information alert</AfpAlert>
  <AfpAlert variant="brand" open>Brand information alert</AfpAlert>
  <AfpAlert variant="accent" open>Accent information alert</AfpAlert>
  <AfpAlert variant="info" open>Info information alert</AfpAlert>
  <AfpAlert variant="error" open>Error information alert</AfpAlert>
  <AfpAlert variant="success" open>Success information alert</AfpAlert>
  <AfpAlert variant="warning" open>Warning information alert</AfpAlert>
</div>

<div class="afp-grid">
  <AfpAlert :variant="'neutral'" open>Neutral information alert</AfpAlert>
  <AfpAlert :variant="'brand'" open>Brand information alert</AfpAlert>
  <AfpAlert :variant="'accent'" open>Accent information alert</AfpAlert>
  <AfpAlert :variant="'info'" open>Info information alert</AfpAlert>
  <AfpAlert :variant="'error'" open>Error information alert</AfpAlert>
  <AfpAlert :variant="'success'" open>Success information alert</AfpAlert>
  <AfpAlert :variant="'warning'" open>Warning information alert</AfpAlert>
</div>

Appearance #

Use the appearance attribute to set the alert's appearance style.

Default info alert

Filled info alert

Outline info alert

Outlined filled info alert

Plain info alert

<div class="afp-grid">
  <afp-alert appearance="default" variant="info" open>Default info alert</afp-alert>
  <afp-alert appearance="filled" variant="info" open>Filled info alert</afp-alert>
  <afp-alert appearance="outlined" variant="info" open>Outline info alert</afp-alert>
  <afp-alert appearance="outlined-filled" variant="info" open>Outlined filled info alert</afp-alert>
  <afp-alert appearance="plain" variant="info" open>Plain info alert</afp-alert>
</div>

<div class="afp-grid">
  <afp-alert [appearance]="'default'" [variant]="'info'" open>Default info alert</afp-alert>
  <afp-alert [appearance]="'filled'" [variant]="'info'" open>Filled info alert</afp-alert>
  <afp-alert [appearance]="'outlined'" [variant]="'info'" open>Outline info alert</afp-alert>
  <afp-alert [appearance]="'outlined-filled'" [variant]="'info'" open>Outlined filled info alert</afp-alert>
  <afp-alert [appearance]="'plain'" [variant]="'info'" open>Plain info alert</afp-alert>
</div>

<div class="afp-grid">
  <AfpAlert appearance="default" variant="info" open>Default info alert</AfpAlert>
  <AfpAlert appearance="filled" variant="info" open>Filled info alert</AfpAlert>
  <AfpAlert appearance="outlined" variant="info" open>Outline info alert</AfpAlert>
  <AfpAlert appearance="outlined-filled" variant="info" open>Outlined filled info alert</AfpAlert>
  <AfpAlert appearance="plain" variant="info" open>Plain info alert</AfpAlert>
</div>

<div class="afp-grid">
  <AfpAlert :appearance="'default'" :variant="'info'" open>Default info alert</AfpAlert>
  <AfpAlert :appearance="'filled'" :variant="'info'" open>Filled info alert</AfpAlert>
  <AfpAlert :appearance="'outlined'" :variant="'info'" open>Outline info alert</AfpAlert>
  <AfpAlert :appearance="'outlined-filled'" :variant="'info'" open>Outlined filled info alert</AfpAlert>
  <AfpAlert :appearance="'plain'" :variant="'info'" open>Plain info alert</AfpAlert>
</div>

Shape #

Use the shape attribute to set the alert's shape style.

Pill info alert

Rounded info alert

Soft info alert

Square info alert

<div class="afp-grid">
  <afp-alert shape="pill" open>Pill info alert</afp-alert>
  <afp-alert shape="rounded" open>Rounded info alert</afp-alert>
  <afp-alert shape="soft" open>Soft info alert</afp-alert>
  <afp-alert shape="square" open>Square info alert</afp-alert>
</div>

<div class="afp-grid">
  <afp-alert [shape]="'pill'" open>Pill info alert</afp-alert>
  <afp-alert [shape]="'rounded'" open>Rounded info alert</afp-alert>
  <afp-alert [shape]="'soft'" open>Soft info alert</afp-alert>
  <afp-alert [shape]="'square'" open>Square info alert</afp-alert>
</div>

<div class="afp-grid">
  <AfpAlert shape="pill" open>Pill info alert</AfpAlert>
  <AfpAlert shape="rounded" open>Rounded info alert</AfpAlert>
  <AfpAlert shape="soft" open>Soft info alert</AfpAlert>
  <AfpAlert shape="square" open>Square info alert</AfpAlert>
</div>

<div class="afp-grid">
  <AfpAlert :shape="'pill'" open>Pill info alert</AfpAlert>
  <AfpAlert :shape="'rounded'" open>Rounded info alert</AfpAlert>
  <AfpAlert :shape="'soft'" open>Soft info alert</AfpAlert>
  <AfpAlert :shape="'square'" open>Square info alert</AfpAlert>
</div>

Icon #

The icon property enables the leading icon slot.

This is super informative
You can tell by how pretty the alert is.

<afp-alert variant="info" open icon>
  <afp-icon slot="icon" name="info-circle"></afp-icon>
  <b>This is super informative</b><br/>
  You can tell by how pretty the alert is.
</afp-alert>

<afp-alert [variant]="'info'" open icon>
  <afp-icon [slot]="'icon'" [name]="'info-circle'"></afp-icon>
  <b>This is super informative</b><br/>
  You can tell by how pretty the alert is.
</afp-alert>

<AfpAlert variant="info" open icon>
  <AfpIcon slot="icon" name="info-circle"></AfpIcon>
  <b>This is super informative</b><br/>
  You can tell by how pretty the alert is.
</AfpAlert>

<AfpAlert :variant="'info'" open icon>
  <AfpIcon :slot="'icon'" :name="'info-circle'"></AfpIcon>
  <b>This is super informative</b><br/>
  You can tell by how pretty the alert is.
</AfpAlert>

Closing Alert #

Alerts can be manually closed using closeable.

Warning: This alert can be closed manually.

<afp-alert id="closeableAlert" variant="warning" appearance="filled" open icon closeable>
    <afp-icon slot="icon" name="exclamation-triangle"></afp-icon>
    <strong>Warning:</strong> This alert can be closed manually.
</afp-alert>

<script>
  closeableAlert.addEventListener('afp-after-hide', () => {
    setTimeout(() => closeableAlert.show(), 3000);
  });
</script>

<afp-alert [id]="'closeableAlert'" [variant]="'warning'" [appearance]="'filled'" open icon closeable>
    <afp-icon [slot]="'icon'" [name]="'exclamation-triangle'"></afp-icon>
    <strong>Warning:</strong> This alert can be closed manually.
</afp-alert>

<script>
  closeableAlert.addEventListener('afp-after-hide', () => {
    setTimeout(() => closeableAlert.show(), 3000);
  });
</script>

<AfpAlert id="closeableAlert" variant="warning" appearance="filled" open icon closeable>
    <AfpIcon slot="icon" name="exclamation-triangle"></AfpIcon>
    <strong>Warning:</strong> This alert can be closed manually.
</AfpAlert>

<script>
  closeableAlert.addEventListener('afp-after-hide', () => {
    setTimeout(() => closeableAlert.show(), 3000);
  });
</script>

<AfpAlert :id="'closeableAlert'" :variant="'warning'" :appearance="'filled'" open icon closeable>
    <AfpIcon :slot="'icon'" :name="'exclamation-triangle'"></AfpIcon>
    <strong>Warning:</strong> This alert can be closed manually.
</AfpAlert>

<script>
  closeableAlert.addEventListener('afp-after-hide', () => {
    setTimeout(() => closeableAlert.show(), 3000);
  });
</script>

Duration #

Use the duration attribute to automatically hide the alert after a given time (in milliseconds).

Show Timed Alert

<div class="afp-stack">
  <afp-button id="showTimedAlert">Show Timed Alert</afp-button>
  
  <afp-alert id="timedAlert" variant="success" duration="4000" style="display:none">
    This alert will disappear automatically after 4 seconds.
  </afp-alert>
</div>

<script>
  const timedAlert = document.getElementById('timedAlert');
  const showButton = document.getElementById('showTimedAlert');

  showButton.addEventListener('click', () => {
    timedAlert.style.display = 'block'; 
    timedAlert.show();                   

    timedAlert.addEventListener('afp-after-hide', () => {
      timedAlert.style.display = 'none';
    }, { once: true });
  });
</script>

<div class="afp-stack">
  <afp-button [id]="'showTimedAlert'">Show Timed Alert</afp-button>
  
  <afp-alert [id]="'timedAlert'" [variant]="'success'" [duration]=4000 [style]="'display:none'">
    This alert will disappear automatically after 4 seconds.
  </afp-alert>
</div>

<script>
  const timedAlert = document.getElementById('timedAlert');
  const showButton = document.getElementById('showTimedAlert');

  showButton.addEventListener('click', () => {
    timedAlert.style.display = 'block'; 
    timedAlert.show();                   

    timedAlert.addEventListener('afp-after-hide', () => {
      timedAlert.style.display = 'none';
    }, { once: true });
  });
</script>

<div class="afp-stack">
  <AfpButton id="showTimedAlert">Show Timed Alert</AfpButton>
  
  <AfpAlert id="timedAlert" variant="success" duration="4000" style="display:none">
    This alert will disappear automatically after 4 seconds.
  </AfpAlert>
</div>

<script>
  const timedAlert = document.getElementById('timedAlert');
  const showButton = document.getElementById('showTimedAlert');

  showButton.addEventListener('click', () => {
    timedAlert.style.display = 'block'; 
    timedAlert.show();                   

    timedAlert.addEventListener('afp-after-hide', () => {
      timedAlert.style.display = 'none';
    }, { once: true });
  });
</script>

<div class="afp-stack">
  <AfpButton :id="'showTimedAlert'">Show Timed Alert</AfpButton>
  
  <AfpAlert :id="'timedAlert'" :variant="'success'" :duration=4000 :style="'display:none'">
    This alert will disappear automatically after 4 seconds.
  </AfpAlert>
</div>

<script>
  const timedAlert = document.getElementById('timedAlert');
  const showButton = document.getElementById('showTimedAlert');

  showButton.addEventListener('click', () => {
    timedAlert.style.display = 'block'; 
    timedAlert.show();                   

    timedAlert.addEventListener('afp-after-hide', () => {
      timedAlert.style.display = 'none';
    }, { once: true });
  });
</script>

Toast Notification #

Use the toast() method to display an alert as a toast notification.

Show Success Toast

Show Error Toast

Show Info Toast

Success: Your toast notification!

Error: Something went wrong!

Info: This is an informational toast.

<div class="afp-cluster">
  <afp-button onclick="toastSuccess.toast()" variant="success">
    Show Success Toast
  </afp-button>
  <afp-button onclick="toastError.toast()" variant="error">
    Show Error Toast
  </afp-button>
  <afp-button onclick="toastInfo.toast()" variant="accent">
    Show Info Toast
  </afp-button>
</div>

<afp-alert id="toastSuccess" icon="true" closeable variant="success">
  <afp-icon slot="icon" name="check-square"></afp-icon>
  <strong>Success:</strong> Your toast notification!
</afp-alert>

<afp-alert id="toastError" icon="true" closeable variant="error">
  <afp-icon slot="icon" name="x-circle"></afp-icon>
  <strong>Error:</strong> Something went wrong!
</afp-alert>

<afp-alert id="toastInfo" icon="true" closeable variant="accent">
  <afp-icon slot="icon" name="info-circle"></afp-icon>
  <strong>Info:</strong> This is an informational toast.
</afp-alert>

<div class="afp-cluster">
  <afp-button [onclick]="'toastSuccess.toast()'" [variant]="'success'">
    Show Success Toast
  </afp-button>
  <afp-button [onclick]="'toastError.toast()'" [variant]="'error'">
    Show Error Toast
  </afp-button>
  <afp-button [onclick]="'toastInfo.toast()'" [variant]="'accent'">
    Show Info Toast
  </afp-button>
</div>

<afp-alert [id]="'toastSuccess'" [icon]=true closeable [variant]="'success'">
  <afp-icon [slot]="'icon'" [name]="'check-square'"></afp-icon>
  <strong>Success:</strong> Your toast notification!
</afp-alert>

<afp-alert [id]="'toastError'" [icon]=true closeable [variant]="'error'">
  <afp-icon [slot]="'icon'" [name]="'x-circle'"></afp-icon>
  <strong>Error:</strong> Something went wrong!
</afp-alert>

<afp-alert [id]="'toastInfo'" [icon]=true closeable [variant]="'accent'">
  <afp-icon [slot]="'icon'" [name]="'info-circle'"></afp-icon>
  <strong>Info:</strong> This is an informational toast.
</afp-alert>

<div class="afp-cluster">
  <AfpButton onclick="toastSuccess.toast()" variant="success">
    Show Success Toast
  </AfpButton>
  <AfpButton onclick="toastError.toast()" variant="error">
    Show Error Toast
  </AfpButton>
  <AfpButton onclick="toastInfo.toast()" variant="accent">
    Show Info Toast
  </AfpButton>
</div>

<AfpAlert id="toastSuccess" icon="true" closeable variant="success">
  <AfpIcon slot="icon" name="check-square"></AfpIcon>
  <strong>Success:</strong> Your toast notification!
</AfpAlert>

<AfpAlert id="toastError" icon="true" closeable variant="error">
  <AfpIcon slot="icon" name="x-circle"></AfpIcon>
  <strong>Error:</strong> Something went wrong!
</AfpAlert>

<AfpAlert id="toastInfo" icon="true" closeable variant="accent">
  <AfpIcon slot="icon" name="info-circle"></AfpIcon>
  <strong>Info:</strong> This is an informational toast.
</AfpAlert>

<div class="afp-cluster">
  <AfpButton :onclick="'toastSuccess.toast()'" :variant="'success'">
    Show Success Toast
  </AfpButton>
  <AfpButton :onclick="'toastError.toast()'" :variant="'error'">
    Show Error Toast
  </AfpButton>
  <AfpButton :onclick="'toastInfo.toast()'" :variant="'accent'">
    Show Info Toast
  </AfpButton>
</div>

<AfpAlert :id="'toastSuccess'" :icon=true closeable :variant="'success'">
  <AfpIcon :slot="'icon'" :name="'check-square'"></AfpIcon>
  <strong>Success:</strong> Your toast notification!
</AfpAlert>

<AfpAlert :id="'toastError'" :icon=true closeable :variant="'error'">
  <AfpIcon :slot="'icon'" :name="'x-circle'"></AfpIcon>
  <strong>Error:</strong> Something went wrong!
</AfpAlert>

<AfpAlert :id="'toastInfo'" :icon=true closeable :variant="'accent'">
  <AfpIcon :slot="'icon'" :name="'info-circle'"></AfpIcon>
  <strong>Info:</strong> This is an informational toast.
</AfpAlert>

Customizing Toast Position #

By default, toast notifications appear in the bottom-right corner of the screen.

You can create multiple stacks on the same page using the stackId property. Each stack can have its own CSS positioning, allowing different toast positions or styles. If no stackId is provided, the default bottom-right stack is used.

The example below shows how to display a toast in the top-right corner:

Show Top-Right Toast

Heads up: This toast is displayed at the top-right corner using a custom stackId.

<afp-button onclick="toastTopRight.toast()">Show Top-Right Toast</afp-button>

<afp-alert 
    id="toastTopRight" 
    stackid="topRight" 
    icon 
    closeable 
    variant="accent">
  <afp-icon slot="icon" name="info-circle"></afp-icon>
  <strong>Heads up:</strong> This toast is displayed at the top-right corner using a custom stackId.
</afp-alert>

<style>
  /* Move only the stack with ID topRight to top-right */
  #topRight {
    top: calc(var(--topbar-height) + var(--afp-space-m));
    right: var(--afp-space-m);
    bottom: auto;
  }
</style>

<afp-button [onclick]="'toastTopRight.toast()'">Show Top-Right Toast</afp-button>

<afp-alert 
    [id]="'toastTopRight'" 
    [stackid]="'topRight'" 
    icon 
    closeable 
    [variant]="'accent'">
  <afp-icon [slot]="'icon'" [name]="'info-circle'"></afp-icon>
  <strong>Heads up:</strong> This toast is displayed at the top-right corner using a custom stackId.
</afp-alert>

<style>
  /* Move only the stack with ID topRight to top-right */
  #topRight {
    top: calc(var(--topbar-height) + var(--afp-space-m));
    right: var(--afp-space-m);
    bottom: auto;
  }
</style>

<AfpButton onclick="toastTopRight.toast()">Show Top-Right Toast</AfpButton>

<AfpAlert 
    id="toastTopRight" 
    stackid="topRight" 
    icon 
    closeable 
    variant="accent">
  <AfpIcon slot="icon" name="info-circle"></AfpIcon>
  <strong>Heads up:</strong> This toast is displayed at the top-right corner using a custom stackId.
</AfpAlert>

<style>
  /* Move only the stack with ID topRight to top-right */
  #topRight {
    top: calc(var(--topbar-height) + var(--afp-space-m));
    right: var(--afp-space-m);
    bottom: auto;
  }
</style>

<AfpButton :onclick="'toastTopRight.toast()'">Show Top-Right Toast</AfpButton>

<AfpAlert 
    :id="'toastTopRight'" 
    :stackid="'topRight'" 
    icon 
    closeable 
    :variant="'accent'">
  <AfpIcon :slot="'icon'" :name="'info-circle'"></AfpIcon>
  <strong>Heads up:</strong> This toast is displayed at the top-right corner using a custom stackId.
</AfpAlert>

<style>
  /* Move only the stack with ID topRight to top-right */
  #topRight {
    top: calc(var(--topbar-height) + var(--afp-space-m));
    right: var(--afp-space-m);
    bottom: auto;
  }
</style>

Properties

Learn more about properties.

Name Description Reflects

open

Whether the alert is visible

Type boolean

Default false

variant

Variant of the alert

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

appearance

appearance of alert

Type

AfpAppearance

Name	Description
`DEFAULT`	Highlighted, primary action (default).
`OUTLINED`	Transparent background with a visible border.
`PLAIN`	Minimal, no border or background.
`FILLED`	Solid background, no border.
`OUTLINED_FILLED`	Solid background with a visible border.

AfpAppearance

Default AfpAppearance.OUTLINED_FILLED

shape

shape of alert

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.PILL

closeable

Whether the alert can be closed by the user

Type boolean

Default false

icon

Whether to show an icon

Type boolean

Default false

duration

Duration (in ms) before auto-hide

Type number

speed

Animation speed (in ms)

Type number

Default 150

stackId
stackid

Optional: ID für den Toast-Stack

Type string | undefined

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Show the alert	-
`hide`	Hide the alert	-
`toast`	Displays the alert as a toast notification.	-

Events

Learn more about events.

Name	Return	Description
`afp-show`	`void`	Emitted when the alert is shown.
`afp-after-show`	`void`	Emitted after the alert has been shown.
`afp-hide`	`void`	Emitted when the alert is hidden.
`afp-after-hide`	`void`	Emitted after the alert has been hidden.
`afp-close`	`void`	Emitted when the Alert gets closed.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`icon`	Custom leading icon.
`close-icon`	Custom close icon.

Internationalization

Learn more about internationalization.

Key	Description
`alert-close.aria-label`	The aria-label of the close icon.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`content`	The main content area.	`::part(content)`
`icon`	The leading icon container.	`::part(icon)`
`close-icon`	The close icon container.	`::part(close-icon)`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/alert/alert.js';