Components
Buttons and form actions
Use shared action compositions for creation, cancellation, and local settings feedback.
On this page
Purpose and usage
Use shared action compositions for creation, cancellation, and local settings feedback.
Use the shared actions at the end of creation forms and SettingsSaveBar within bounded settings forms.
Anatomy
| Part | Contract |
|---|---|
| Primary action | Accent fill, accent-ink label, optional check icon. |
| Secondary action | Bordered Cancel link returns to a defined destination. |
| Action group | Right-aligned after a divider, with consistent spacing. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| NewItemFormActions | cancelHref, submitLabel, disabled. |
| SettingsSaveBar | saved and optional buttonLabel; submit behavior belongs to the parent form. |
State coverage
| State | Implemented behavior |
|---|---|
| Default | Primary action is available. |
| Hover | Accent-strong replaces the accent fill. |
| Disabled | Native disabled plus cursor and opacity changes on creation action. |
| Saved | SettingsSaveBar announces Changes saved through aria-live. |
Interaction and responsive behavior
- Retain native submit semantics.
- The parent must provide validity, pending behavior, and real persistence.
- Keep labels concise and specific: Create project, Save changes, or Create task.
Accessibility contract
- Native buttons support keyboard activation.
- Cancel is a link because it changes destination.
- Do not infer loading behavior from disabled; the source does not define a shared loading-button variant.
Known gaps and readiness
There is no single exported Button primitive covering every application action. Loading, async failure, and retry states are not standardized across these compositions.
Composition example
<NewItemFormActions
cancelHref="/projects"
submitLabel="Create project"
disabled={!title.trim()}
/>Source references
| File | Responsibility |
|---|---|
| app/components/new-item-form-layout.tsx | Creation actions and class constants |
| app/components/settings-form-controls.tsx | SettingsSaveBar |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1