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.
Alert banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.Alerts are rendered at the top of the page, below the header.Alert banners are rendered as a div with a role="alert" attribute. Alert shows a close button by default is false. Can be closed by clicking on the close button.
These alerts consist of a message and a close button. You can pass a message to the alert component. The close button is true by default. By clicking on the close button, the alert will be closed.
Molestie et, consectetur condimentum facilisis elementum duis sit.
Molestie et, consectetur condimentum facilisis elementum duis sit.
Molestie et, consectetur condimentum facilisis elementum duis sit.
Molestie et, consectetur condimentum facilisis elementum duis sit.
Molestie et, consectetur condimentum facilisis elementum duis sit.
These alerts consist of a title, a message, and without a close button. You can pass a title to the alert component. The close button can be shown after closable prop is true .
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
These alerts consist of a message, and an action buttons. You can pass a message and an action buttons to the alert component. Action buttons have variants and icons. Also, these variants are same as the alert variants.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
Non porttitor nisl volutpat ac imperdiet.
Molestie et, consectetur condimentum facilisis elementum duis sit. Lobortis proin lectus amet ullamcorper.
| Name | Description | Default |
|---|---|---|
| actions | ReactNode | - |
| children | never | - |
| closable | boolean | - |
| css | CSS | - |
| isOpen | boolean | - |
| message | ReactNode | - |
| onClick | (e: MouseEvent<HTMLElement, MouseEvent>) => void | - |
| onClose | () => void | - |
| title | string | - |
| variant | variant of the alert "success""info""warning""primary""error" | "'info'" |