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 type="negative">
    This is an error message
  </dap-ds-feedback>

  <dap-ds-feedback type="warning">
    This is a warning message
  </dap-ds-feedback>

  <dap-ds-feedback type="positive">
    This is a success message
  </dap-ds-feedback>
</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-feedback subtle>
  This is a subtle message
</dap-ds-feedback>

The feedback component comes in two sizes: small, and large. The default size is sm.

<dap-ds-stack>
  <dap-ds-feedback type="info">
    This is a small info
  </dap-ds-feedback>

  <dap-ds-feedback size="lg" type="info">
    This is a large info
  </dap-ds-feedback>
</dap-ds-stack>

The feedback component can have a custom icon. The icon can be added by using the icon slot.

<dap-ds-feedback type="info">
  <dap-ds-icon slot="icon" name="cookie-line"></dap-ds-icon>
  This is a custom icon
</dap-ds-feedback>

import { DapDSFeedback } from 'dap-design-system/dist/dds'

import { DapDSFeedbackReact } from 'dap-design-system/dist/react'

No custom events available.

No CSS parts available.