Skip to main content
Official government website

Feedback

A gold-bordered box asking users whether the page was helpful.

Examples
HTML and React
Group
Feedback
On this page

Preview

Feedback box
Open in new tab

The Feedback component is a gold-bordered box that asks users whether the page was helpful and links to a feedback route. It holds a heading, a short line of body copy and a link. It renders as an aside, so it sits alongside the page’s main content rather than inside it.

In React the heading defaults to “Was this helpful?” and can be replaced with the heading prop. The body copy and the link are children, so you keep control of the link target, analytics attributes and router integration. Use the Link component (or a plain a with the govbb-link class) for the link; on the tinted surface it renders in ink and lifts to a white background on hover, the same as links in the status banner.

Usage

When to use

  • Use the feedback box to give users a consistent route for commenting on a page or service.
  • Place it once, near the end of the main content and before the footer.

When not to use

  • Do not use it for lifecycle or service messages; use a status banner.
  • Do not place a complete survey or open text field inside the box; link to a focused feedback form.

Best practices

Ask about the page the user just used

Keep the prompt short and specific. Carry the page URL or identifier into the feedback route so users do not have to explain where they were.

Set expectations before collecting feedback

Make it clear whether feedback will receive a response. Provide a separate contact route for help with an individual case or urgent service problem.

Custom heading

Replace the default heading when the prompt needs different wording.

Feedback box with a custom heading
Open in new tab