Primitive
ImplementationBrief
A selectable brief for implementing a screen, with a copy action and a manual fallback.
States
Ready
Copy this brief into your coding assistant.
Copied
Brief copied.
Manual copy
Copy was unavailable. The brief is selected; use your device’s copy command.
When to use
- In design-system documentation when handing a complete implementation brief to a coding assistant.
When not to
- For editable household notes or approval questions.
- For a general-purpose rich text editor.
Props
| Name | Type | Notes |
|---|---|---|
| text* | string | The complete brief. Keep its source shared with the generated guide. |
| initialState | "ready" | "copied" | "manual" | Initial feedback for documentation states only. Omit in normal use. |
| className | string | Layout classes using design tokens. |
* required
Accessibility invariants
- The read-only textarea has a visible label and supports native selection.
- The copy action is a native Button and keeps focus on success.
- A polite status announces the result. Failure focuses and selects the full brief for manual copying.
- Copy uses a neutral button; accent remains reserved for household asks.
Agent instructions
For anything generating UI from this system
Use the shared IMPLEMENTATION_BRIEF from design-system/docs/build-with-ai.ts. Await clipboard success before showing Copied. Keep the selectable textarea available even when clipboard permissions or browser support are missing. Never add a permission dialog or hide the text behind the copy action.