Joana Mendes

Joana Mendes

Administrator

Home
Reports

RDS - Notification Component's

The Notification Components page in our design system is dedicated to a collection of crucial UI elements crafted to effectively convey messages and alerts to users. These components play a vital role in user communication, ensuring that important information is delivered in a clear, timely, and unobtrusive manner.

Our Notification Components are built using Vue.js and meticulously documented with Storybook. This documentation provides detailed guidance on how to implement, configure, and customize each component, making it easier for developers to integrate them into their applications seamlessly.

1. Alert

Alerts are essential components used to provide immediate contextual feedback and notifications in response to user actions or system activities. They play a crucial role in enhancing user experience by communicating important information effectively and ensuring users are informed about critical events.

1. variant="info" - (default) dismissible="true"
Providing informational updates or announcements without urgency.
2. variant="success" dismissible="false"
Confirming a successful form submission.
3. variant="danger" dismissible="false"
Notifying users of invalid input or system errors.
4. variant="warning" dismissible="true"
Alerting users to potential risks or actions that require caution.

2. AlertCard

AlertCards are versatile components designed to convey important contextual messages and present actionable options based on them. They combine the functionality of alerts with the layout and interaction elements of cards, making them suitable for displaying critical information in a visually appealing and actionable format.

1. variant="info" - (default) dismissible="true"
Informative TextThere is a theory that says that if one day someone discovers exactly what the Universe is for and why it is here, it will disappear instantly and be replaced by something still stranger and more inexplicable. There is a second theory that says that this has already happened.
2. variant="danger" dismissible="false"
Error TextThere is a theory that says that if one day someone discovers exactly what the Universe is for and why it is here, it will disappear instantly and be replaced by something still stranger and more inexplicable. There is a second theory that says that this has already happened.
3. variant="warning" dismissible="true"
Warning TextThere is a theory that says that if one day someone discovers exactly what the Universe is for and why it is here, it will disappear instantly and be replaced by something still stranger and more inexplicable. There is a second theory that says that this has already happened.

3. Pulsar

Pulsars are educational components designed to instruct users about new features, updates, or functionalities within an interface or product. They serve as interactive guides that highlight key elements and provide contextual information to enhance user understanding and engagement.

1. variant="green" position="top-end"
Pulsar target
2. variant="blue" position="bottom"
Pulsar target
3. variant="red" position="left-end"
Pulsar target

4. DialogModal

DialogModal is a crucial component used to interact with users in critical or informative situations. It combines the functionality of a dialog box with modal behavior, providing a focused interface to convey important messages, gather user input, or guide users through specific tasks.

1. variant="info" - (default)
2. variant="error"
3. variant="warning"