Feedback
A gold-bordered box asking users whether the page was helpful.
On this page
Preview
import { Feedback, Link } from '@govtech-bb/react';
<Feedback>
<p>Give us your feedback about this page.</p>
<Link href="/feedback">Help us improve alpha.gov.bb</Link>
</Feedback>;<aside class="govbb-feedback">
<h3 class="govbb-feedback__heading">Was this helpful?</h3>
<p>Give us your feedback about this page.</p>
<a class="govbb-link" href="/feedback/">Help us improve alpha.gov.bb</a>
</aside>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.
import { Feedback, Link } from '@govtech-bb/react';
<Feedback heading="Rate this service">
<p>Tell us how your application went.</p>
<Link href="/feedback">Give feedback on this service</Link>
</Feedback>;<aside class="govbb-feedback">
<h3 class="govbb-feedback__heading">Rate this service</h3>
<p>Tell us how your application went.</p>
<a class="govbb-link" href="/feedback/">Give feedback on this service</a>
</aside>