Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
Use alerts to communicate brief, important, and potentially time-sensitive messages to the user.
Alerts are intended to attract the user's attention without interrupting their ongoing task.
There are various methods to integrate this component into your project.
We advise opting for the "Standard HTML" approach for alerts that remain static on the page and using the "Web Component" method for dismissible alerts.
Contentus momentus vero siteos et accusam iretea et justo.
<div role="alert" class="alert alert-primary"> <p>Contentus momentus vero siteos et accusam iretea et justo.</p> </div>
Make sure the @swisspost/design-system-styles package is already present in your project
or follow the installation guidelines.
To import all Design System styles:
@use '@swisspost/design-system-styles/index.scss';
To import only the styles required for this component:
@use '@swisspost/design-system-styles/basics.scss'; @use '@swisspost/design-system-styles/components/alert.scss';
Alerts can contain various HTML elements like headings, paragraphs, lists and dividers.
Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
An deven morecon tentum no sea takimata sanctus est magna aliquyam erat.
Alerts come with a preassigned icon based on their type.
You have the option to customize this icon by using a post-icon element inside the alert.
For more information, read the getting started with icons guide.
Contentus momentus vero siteos et accusam iretea et justo.
If you prefer not to display any icon, you can add the .no-icon class to the alert.
To include action buttons within an alert, apply the .alert-action class to the alert element,
enclose the alert's content within a .alert-content container, and place the action buttons within a .alert-buttons wrapper.
To present an alert as a banner anchored at the bottom of the page, simply add the class .alert-fixed-bottom.
These alerts are typically designed to be dismissible, therefore it is advisable to employ a web component for their implementation.
Contentus momentus vero siteos et accusam iretea et justo.
Contentus momentus vero siteos et accusam iretea et justo.
<post-alert><p>Contentus momentus vero siteos et accusam iretea et justo.</p></post-alert>
| Name | Description | Default | Control |
|---|---|---|---|
| content | |||
| innerHTML | Defines the HTML markup contained in the alert. string | - | |
| props | |||
| dismissible | If true, a close button (×) is displayed and the alert can be dismissed by the user.boolean | false | |
| fixed | If true, the alert is positioned at the bottom of the window, from edge to edge.boolean | false | |
| icon | The icon to display in the alert. By default, the icon depends on the alert type. If string | ||
| type | The type of the alert. "danger""gray""info""primary""success""warning" | 'primary' | |
| events | |||
| postDismissed | An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts. void | - | - |
| methods | |||
| dismiss | Triggers alert dismissal programmatically (same as clicking on the close button (×)). dismiss() => Promise<void> | - | - |
| slots | |||
| actions | Slot for placing custom actions (buttons, links, etc.) within the alert. other | - | - |
| default | Slot for placing the main content/message of the alert. other | - | - |
| heading | Slot for placing custom content within the alert's heading. other | - | - |
The <post-alert> element is part of the @swisspost/design-system-components package.
For more information, read the getting started with components guide.
Alerts can contain various HTML elements like paragraphs, lists, icons and dividers.
By default all children of the <post-alert> are placed in the body.
Use the heading slot to place a child in the heading, and the actions slot for action buttons.
Learn more about slots in the mdn web docs.
Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr.
Alerts come with a preassigned icon based on their type.
You have the option to customize this icon by assigning the desired icon's name to the icon property of the alert.
Find the icon you need with the icon search page.
Contentus momentus vero siteos et accusam iretea et justo.
If you prefer not to display any icon, you can set the icon property to none.
Contentus momentus vero siteos et accusam iretea et justo.
The dismissible property can be set to enable users to dismiss the alert.
When present, it specifies that the alert should contain a dismiss button,
and you must provide a label for this button using the dismiss-label property.
Although the label remains hidden from view, it is essential for ensuring accessibility for users of assistive technologies.
Contentus momentus vero siteos et accusam iretea et justo.
Alternatively, you can use any button, including action buttons within the alert, as a trigger for dismissing the alert using the .dismiss() method.
This method operates asynchronously and returns a promise that resolves once the fade-out animation has finished.
const alert = document.getElementById('alertId') as HTMLPostAlertElement; alert.dismiss().then(() => {});
To present an alert as a banner anchored at the bottom of the page, simply add the fixed property.
Such alerts are typically intended to be dismissible.