DÁP Design System - Feedback message webcomponent

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/dist/dds'

Importing React

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

Attributes

Property	Type	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.

Slots

Name	Description
`icon`	The custom icon of the feedback.
`(default)`	The text of the feedback.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main feedback container.
`icon`	The icon of the feedback.
`text`	The text of the feedback.

CSS Custom Properties

Property Name	Description
`--dds-feedback-spacing`	The spacing around the feedback component. Default is `var(--dds-spacing-200)`.
`--dds-feedback-color`	The text color of the feedback. Default is `var(--dds-text-positive-subtle)`.
`--dds-feedback-font-size`	The font size of the feedback. Default is `var(--dds-font-sm)`.
`--dds-feedback-font-weight`	The font weight of the feedback. Default is `var(--dds-font-weight-bold)`.
`--dds-feedback-icon-fill`	The fill color of the feedback icon. Default is `var(--dds-icon-positive-subtle)`.
`--dds-feedback-icon-spacing`	The spacing between the icon and text. Default is `var(--dds-spacing-100)`.
`--dds-feedback-color-warning`	The text color for warning feedback. Default is `var(--dds-text-neutral-base)`.
`--dds-feedback-color-positive`	The text color for positive feedback. Default is `var(--dds-text-positive-subtle)`.
`--dds-feedback-color-negative`	The text color for negative feedback. Default is `var(--dds-text-negative-subtle)`.
`--dds-feedback-icon-fill-warning`	The icon fill color for warning feedback. Default is `var(--dds-icon-informative-subtle)`.
`--dds-feedback-icon-fill-positive`	The icon fill color for positive feedback. Default is `var(--dds-icon-positive-subtle)`.
`--dds-feedback-icon-fill-negative`	The icon fill color for negative feedback. Default is `var(--dds-icon-negative-subtle)`.