Sorry, but you either have no stories or none are selected somehow.
Please check the Storybook config.
Try reloading the page.
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:
Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.
Alert
An alert displays an important message in a way that attracts the user's attention without interrupting the user's task.
These temporary window elements are used to display short messages; they appear at the top-right corner of the screen and can be dismissed by clicking the [x] or it will disappear after a few seconds
Passive
Message Type
Informational
To provide information to users, and don’t interrupt any current actions
Does not require immediate action and can be dismissed by a user clicking the [X] or passively display until the display timer expires
Shows blue color on the background and uses the info-circle icon
Success
To confirm a task is completed as expected or an action is successful.
Typically does not require further action and can be dismissed automatically or persist in a nonintrusive manner
Shows green color on the background and uses the check icon
Warning
To inform users that an action is undesirable
Often persists until users have taken action to dismiss the notification or taken steps to resolve the issue
Shows yellow color on background and uses the exclamation-triangle icon
Error
To inform that an action hasn't happened as expected, usually something has failed and the user is expected to take action
Always persists until the user has taken steps to remedy the issue that triggered the notification
Shows red color on background and uses the exclamation-triangle icon
Main elements
Icon status: represents the importance of the message through the color and icon for each status.
Alert title: should be explicit, clear and short, conveying the most important part of the information.
Details: precise description for the notification, telling users what they need to do.
Button and text links: only persistent notifications should contain text links or buttons.
Close icon: appears when the notification can be dismissed by the user.
Usage
Inline Banner
Inline Banners are task-oriented alerts that notify users of the status of an action or system. These alerts are contextual — appearing above or below main content areas — allowing users to address issues or to read messages quickly.
Do's
Use the appropriate status for the message (info/success/warning/error).
Use plain, simple language for the messages to ensure users understand them and know how to address them.
Focus on notifications if they are relevant to the users' current workflow and should be addressed immediately.
Don'ts
Do not use Primary calls to actions.
Do not hide other content with inline notifications.
Do not repeat the alert copy/title on the details message.
When to use
To inform at that time how to continue a task in which users must perform an action.
To provide some options for users to take action.
To explain in detail the reasons why something can’t be done by users.
Placement
Should be placed immediately above or below the related element.
<Alerttitle={title}severity={severity}buttonContent={buttonContent}onRemove={onRemove}> Child content that includes some alert details, like maybe what actually happened.</div></Alert>
Toast
Toast notifications are short messages that appear in the top-right corner of the page and are automatically hidden after a certain amount of time – they provide live notifications, without interrupting the user experience or requiring an action to be taken.
Do's
Use this component using AppEvents and getAppEvents().
Show the Toast publishing the appEvent with the proper type and payload needed.
Do not use this component directly. Instead, emit the appEvent to trigger it's appearance.
When to use
To convey general confirmation or non-critical actions.
Immediately after an event is taken, such as a permission is updated or some Dashboards are imported or deleted.
Status according to use cases:
Success: When any action is successful, it is confirmed when a task is completed as expected.
Warning: It is used to report a current status that users should be aware of or that could have serious consequences.
Error: Inform users of an error, and sometimes provide more information about how to fix the error.
Placement
Slide in and out from the top right corner of the page.
<Alerttitle={title}severity={severity}onRemove={onRemove}elevated> Child content that includes some alert details, like maybe what actually happened.
</Alert>
Name
Description
Default
title*
string
-
onRemove
On click handler for alert button, mostly used for dismissing the alert