FeedbackBar

Tier: clientUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { FeedbackBar } from '@nizivo/react/unstable/feedback-bar';

const REASONS = ['Not accurate', 'Not helpful', 'Too long', 'Something else'];

export function FeedbackBarExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <FeedbackBar reasons={REASONS} />
      <FeedbackBar defaultValue="up" reasons={REASONS} />
      <FeedbackBar defaultValue="down" reasons={REASONS} />
    </div>
  );
}

ImportCopy Anchor Link

import { FeedbackBar } from '@nizivo/react/unstable/feedback-bar';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/chip-group.css and @nizivo/react/css/icon-button.css
import '@nizivo/react/css/feedback-bar.css';

Static or interactiveCopy Anchor Link

Client. The votes are IconButtons with aria-pressed, and the reasons a ChipGroup. How to choose.

VotesCopy Anchor Link

value, defaultValue and onValueChange hold the vote: 'up', 'down' or null. Pressing the pressed vote clears it. The buttons keep their names ("Good answer", "Bad answer"); the prompt changes to a thanks, and a screen reader hears it. A vote never opens a dialog or moves focus.

ReasonsCopy Anchor Link

Pass reasons to offer them after a thumbs down, one to pick; reason, defaultReason and onReasonChange hold it. Keep them few and short: "Not accurate", "Too long".

PropsCopy Anchor Link

Other exportsCopy Anchor Link

FeedbackBarLabels type

import type { FeedbackBarLabels } from '@nizivo/react/unstable/feedback-bar'

FeedbackBar's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
downrequired	string	'Bad answer'	The thumbs down's name.
promptrequired	string	'Was this helpful?'
reasonsrequired	string	'What went wrong'	The reasons' group name.
thanksDownrequired	string	'Thanks. What went wrong?'	After a thumbs down.
thanksUprequired	string	'Thanks — glad it helped.'	After a thumbs up.
uprequired	string	'Good answer'	The thumbs up's name.

FeedbackBarProps type

import type { FeedbackBarProps } from '@nizivo/react/unstable/feedback-bar'

The props of FeedbackBar, listed above.

FeedbackBarState type

import type { FeedbackBarState } from '@nizivo/react/unstable/feedback-bar'

The render state of FeedbackBar, listed above.

FeedbackValue type

import type { FeedbackValue } from '@nizivo/react/unstable/feedback-bar'

A vote, or none.

type FeedbackValue = "up" | "down" | null

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-feedback-bar, .nz-feedback-bar-prompt, .nz-feedback-bar-reason, .nz-feedback-bar-row, .nz-feedback-bar-vote, .nz-feedback-bar-votes.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• feedback-bar-reason: draws the outline when the hidden input inside it has keyboard focus.
• feedback-bar-vote: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.