#902
Align between
A stack of three full-width outlined neutral Buttons with align="between": label at the start, a Kbd hint at the end; the last one is loading and keeps its spinner at the start.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Align between" pattern (@codeatlasdev/ui demo #902, inputs/button) in my app.
Call get_demo({ ids: ["#902"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Action grids and menus of full-width buttons where the label is left-aligned and the shortcut sits on the right.
Keep these library parts, with the props and tokens the demo uses:
- Button, Kbd from "@codeatlasdev/ui"
Behaviour to keep:
- `.grid` with `gap: var(--ca-space-2)` and `max-width: 20rem`
- Each `<Button variant="outlined" tone="neutral" align="between" fullWidth trailingHint>` with a `<Kbd>` in `trailing`: Open lead (O), Assign to me (A)
- Third button Syncing (R) also has `loading`, so the spinner replaces the leading slot while the label stays left
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
- `.grid` with `gap: var(--ca-space-2)` and `max-width: 20rem`
- Each `<Button variant="outlined" tone="neutral" align="between" fullWidth trailingHint>` with a `<Kbd>` in `trailing`: Open lead (O), Assign to me (A)
- Third button Syncing (R) also has `loading`, so the spinner replaces the leading slot while the label stays left
Related
Loading source.