DocsFeedback
The quiet "Was this helpful?" closing a docs page, as a plain form that posts without JavaScript.
Thanks for the feedback.
View code
<DocsFeedback
action="/docs/feedback"
page="/docs/alerts"
state={sent ? "sent" : "idle"}
labels={{
question: "Was this page helpful?",
yes: "Yes",
no: "No",
note: "Anything we could add? (optional)",
send: "Send feedback",
thanks: "Thanks for the feedback.",
}}
/>Demo docs sites
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
- Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
- API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
- Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { DocsFeedback } from "@sdxc/ui/docs";Renders the vote form, or the thank-you once state is sent. The form posts
helpful=yes|no, page and an optional note to action; the thank-you is a live
status so a reader on a screen reader hears it after an enhanced submit.
Examples
<DocsFeedback frame="feedback" resetScroll="manual" action="/docs/feedback" page="/docs/alerts" labels={labels} />Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
action | string | Yes | URL the form posts to. |
page | string | Yes | Identifier of the page, posted in the page field; usually its path. |
labels | Labels | Yes | |
state | "idle" | "sent" | No | |
frame | string | No | The named frame the vote reloads (data-rmx-target), so a page that renders this block inside <Frame name> swaps in the thank-you without reloading the page. |
resetScroll | "manual" | "after-transition" | No | "manual" keeps the reader where they are when the vote's response renders, instead of the scroll reset a navigation does by default (data-rmx-reset-scroll). |
Also accepts everything in Omit<TagProps<"div">, "children">.
Types
| Name | Values | What it decides |
|---|---|---|
State | "idle" | "sent" | idle asks the question; sent thanks the reader in place of the form. |