Feedback message

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.

Design system docs Examples Variants

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>
Subtle

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>
Sizes

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>
Custom Icon

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>
Importing 
import { DapDSFeedback } from 'dap-design-system'
Importing React 
import { DapDSFeedbackReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSFeedback } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
feedbackstringThe feedback message.
feedbackSize'negative', 'positive' , 'warning'The type of the feedback.
feedbackSubtlebooleanThe weight of the feedback.
feedbackNoMarginbooleanRemoves the margins around the feedback.
feedbackIdstringThe id of the feedback.
Slots
NameDescription
iconThe custom icon of the feedback.
(default)The text of the feedback.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main feedback container.
iconThe icon of the feedback.
textThe text of the feedback.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-feedback::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-feedback::part(base),
.my-custom-dap-ds-feedback::part(icon) {
  /* Shared styles */
}

Example usage:

<dap-ds-feedback class="my-custom-dap-ds-feedback">
  Feedback message
</dap-ds-feedback>

.my-custom-dap-ds-feedback::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties
Property NameDescription
--dds-feedback-spacingThe spacing around the feedback component. (default: var(--dds-spacing-200))
--dds-feedback-colorThe text color of the feedback. (default: var(--dds-text-positive-subtle))
--dds-feedback-font-sizeThe font size of the feedback. (default: var(--dds-font-sm))
--dds-feedback-font-weightThe font weight of the feedback. (default: var(--dds-font-weight-bold))
--dds-feedback-icon-fillThe fill color of the feedback icon. (default: var(--dds-icon-positive-subtle))
--dds-feedback-icon-spacingThe spacing between the icon and text. (default: var(--dds-spacing-100))
--dds-feedback-color-warningThe text color for warning feedback. (default: var(--dds-text-neutral-base))
--dds-feedback-color-positiveThe text color for positive feedback. (default: var(--dds-text-positive-subtle))
--dds-feedback-color-negativeThe text color for negative feedback. (default: var(--dds-text-negative-subtle))
--dds-feedback-icon-fill-warningThe icon fill color for warning feedback. (default: var(--dds-icon-informative-subtle))
--dds-feedback-icon-fill-positiveThe icon fill color for positive feedback. (default: var(--dds-icon-positive-subtle))
--dds-feedback-icon-fill-negativeThe icon fill color for negative feedback. (default: var(--dds-icon-negative-subtle))
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-feedback
  style="--dds-feedback-spacing: value; --dds-feedback-color: value;">
  Feedback message
</dap-ds-feedback>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-feedback {
  --dds-feedback-spacing: value;
  --dds-feedback-color: value;
  --dds-feedback-font-size: value;
}

<dap-ds-feedback class="my-custom-dap-ds-feedback">
  Feedback message
</dap-ds-feedback>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-feedback {
  --dds-feedback-spacing: value;
  --dds-feedback-color: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.