Feedback component can be used to give more information to the user about the input field. It can be used to give a hint about the input field or to give an error message.
The feedback component comes in four variants. The info variant is used to give information to the user, the error variant is used to give an error message, the warning variant is used to give a warning message, and the success variant is used to give a success message.
<dap-ds-stack> <dap-ds-feedback feedbackType="negative"> This is an error message </dap-ds-feedback> <dap-ds-feedback feedbackType="warning"> This is a warning message </dap-ds-feedback> <dap-ds-feedback feedbackType="positive"> This is a success message </dap-ds-feedback> Pure CSS feedback <div className="dds-feedback dds-feedback--negative"> <dap-ds-icon class="feedback__icon" size="sm" name="error-warning-fill"> </dap-ds-icon> This is an error message </div> <div className="dds-feedback dds-feedback--warning"> <dap-ds-icon class="feedback__icon" size="sm" name="error-warning-fill"> </dap-ds-icon> This is a warning message </div> <div className="dds-feedback dds-feedback--positive"> <dap-ds-icon class="feedback__icon" size="sm" name="checkbox-circle-fill"> </dap-ds-icon> This is a success message </div> </dap-ds-stack>
The feedback component comes with a subtle variant. The subtle variant is used to give a subtle message to the user.
<dap-ds-stack> <dap-ds-feedback feedbackSubtle> This is a subtle message </dap-ds-feedback> Pure CSS feedback <div className="dds-feedback dds-feedback--subtle"> <dap-ds-icon class="feedback__icon" size="sm" name="checkbox-circle-line"> </dap-ds-icon> This is a subtle message </div> </dap-ds-stack>
The feedback component comes in two sizes: small, and large. The default size is sm.
<dap-ds-stack> <dap-ds-feedback feedbackSize="xs" feedbackType="info"> This is a extra small info </dap-ds-feedback> <dap-ds-feedback feedbackType="info"> This is a small info </dap-ds-feedback> <dap-ds-feedback feedbackSize="lg" feedbackType="info"> This is a large info </dap-ds-feedback> Pure CSS feedback <div className="dds-feedback dds-feedback--xs"> <dap-ds-icon class="feedback__icon" size="xs" name="information-fill"> </dap-ds-icon> This is a extra small info </div> <div className="dds-feedback"> <dap-ds-icon class="feedback__icon" size="sm" name="information-fill"> </dap-ds-icon> This is a small info </div> <div className="dds-feedback dds-feedback--lg"> <dap-ds-icon class="feedback__icon" size="lg" name="information-fill"> </dap-ds-icon> This is a large info </div> </dap-ds-stack>
The feedback component can have a custom icon. The icon can be added by using the icon slot.
<dap-ds-stack> <dap-ds-feedback feedbackType="info"> <dap-ds-icon slot="icon" name="cookie-line"></dap-ds-icon> This is a custom icon </dap-ds-feedback> Pure CSS feedback <div className="dds-feedback"> <dap-ds-icon class="feedback__icon" name="cookie-line"> </dap-ds-icon> This is a custom icon </div> </dap-ds-stack>
import { DapDSFeedback } from 'dap-design-system/dist/dds'
import { DapDSFeedbackReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
feedback | string | The feedback message. | |
feedbackSize | 'negative', 'positive' , 'warning' | The type of the feedback. | |
feedbackSubtle | boolean | The weight of the feedback. | |
feedbackNoMargin | boolean | Removes the margins around the feedback. | |
feedbackId | string | The id of the feedback. |
| Name | Description |
|---|---|
icon | The custom icon of the feedback. |
(default) | The text of the feedback. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main feedback container. |
icon | The icon of the feedback. |
text | The text of the feedback. |