Feedback Icons

Status-colored circular icons that automatically display the correct glyph for each status type

Feedback Messages

Combine the status icon with a text message for inline validation results and contextual hints

This field is required

Built-in Features

Auto Icon by Status

Set data-status and the correct icon glyph appears automatically: checkmark for success, alert for warning, X for error, info circle for info.

Parent Status Inheritance

Place a feedback icon inside any element with data-status and it inherits the status color and icon without needing its own attribute.

Three Visual Styles

Solid fill by default, outline for lighter weight, and ring for extra emphasis. Combine freely with any status and size.

Programmatic Control

Create, dismiss, and manage feedback lifecycle with NDS.Feedback.create(). Permanent feedback survives status changes and restores automatically.

Usage Guidelines

Best Practices

Use NDS.Feedback.create() for general-purpose feedback on any element: tooltips, notifications, hints on divs, sections, or cards
For form validation, use NDS.Forms.setStatus() instead, which creates feedback internally and also drives border colors and ARIA attributes. See Forms
Use icon-only feedback (no message) inside components like Alerts and form headers where the status is already communicated by surrounding context
Use feedback with message for standalone inline validation below form fields or as contextual hints
Don't use feedback icons for page-level notifications. Use an Alert instead
Use nds-sm for inline text and form validation. Use nds-md for standalone status indicators that need more visual presence
Use nds-ring for critical messages that need immediate attention. Use nds-outline for hints and informational messages
Use permanent: true for baseline hints that should reappear after temporary errors are cleared
Match the status to the message severity: error for validation failures, success for confirmations, warning for caution, info for tips, neutral for general hints

Modifier Classes

Class	Description
`nds-sm`	Small size, 16px icon. For inline text and form validation.
`nds-md`	Medium size, 24px icon. Default when no size is specified.
`nds-outline`	Transparent background with the status icon shown as a stroke icon. Lighter visual weight.
`nds-ring`	Adds a colored ring around the icon for extra emphasis on critical messages.

Data Attributes

Attribute	Description
`data-status`	Set on the `.nds-feedback` element or any parent. Values: `error`, `success`, `warning`, `info`, `neutral`. Sets color and auto-selects the icon.
`data-permanent`	Set on a feedback element in HTML to mark it as permanent. Survives status changes and is restored when temporary feedback is dismissed.

JavaScript API

NDS.Feedback creates and manages feedback elements programmatically. For form validation, use NDS.Forms.setStatus() which calls Feedback internally and also sets form-specific attributes.

NDS.Feedback.create(options)

Option	Type	Default	Description
`message`	string	`''`	Feedback message text. Omit for icon-only feedback.
`status`	string	`'info'`	`'error'`, `'success'`, `'warning'`, `'info'`, `'neutral'`
`target`	string \| Element	null	CSS selector or DOM element to attach feedback to
`position`	string	`'append'`	`'before'`, `'after'`, `'prepend'`, `'append'`
`size`	string	`'sm'`	`'sm'`, `'md'`
`style`	string	`''`	`''` (solid), `'ring'`, `'outline'`
`showIcon`	boolean	true	Show or hide the status icon
`permanent`	boolean	false	Persist across status changes. Hidden when new non-permanent feedback appears, restored on dismiss.
`id`	string	null	Custom ID for the feedback element
`className`	string	`''`	Additional CSS classes
`ariaLive`	string	null	`'polite'` or `'assertive'`. Auto-set based on status if omitted.
`onDismiss`	Function	null	Callback when feedback is dismissed
`onCreate`	Function	null	Callback after feedback is created

Other Methods

Method	Description
`NDS.Feedback.dismiss(element)`	Dismiss a single feedback element. Restores any hidden permanent feedback.
`NDS.Feedback.dismissAll(container)`	Dismiss all non-permanent feedback in a container. Restores permanent feedback visibility.