#983
Button addons
Two TextFields with a button inside the border: a read-only share link with a copy IconButton and a coupon code with an Apply button.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Button addons" pattern (@codeatlasdev/ui demo #983, inputs/text-field) in my app.
Call get_demo({ ids: ["#983"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A field with its own action: copy a value, apply a code, submit a search, with the button keeping its own name and Tab stop.
Keep these library parts, with the props and tokens the demo uses:
- Button, IconButton, TextField from "@codeatlasdev/ui"
Behaviour to keep:
- `label="Share link" readonly` with `suffix={copyBtn}`: a text-variant small IconButton named "Copy link" ("Link copied" after a click)
- `label="Coupon code"` with `suffix={applyBtn}`: a ghost small Button "Apply", disabled while the field is empty
- The fields are stacked in a column, `max-width: 24rem`, `gap: var(--ca-space-4)`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `label="Share link" readonly` with `suffix={copyBtn}`: a text-variant small IconButton named "Copy link" ("Link copied" after a click)
- `label="Coupon code"` with `suffix={applyBtn}`: a ghost small Button "Apply", disabled while the field is empty
- The fields are stacked in a column, `max-width: 24rem`, `gap: var(--ca-space-4)`
Related
Loading source.