Components
Admin buttons
Express action priority and consequence with native pending-aware controls.
On this page
Purpose and placement
Express action priority and consequence with native pending-aware controls.
Anatomy
| Part | Behavior |
|---|---|
| Label | Specific action verb. |
| Variant | primary, secondary, ghost, danger or success. |
| Feedback | Disabled/pending state and source focus outline. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| AdminButton | Native button props plus variant and className; default type is submit. |
| AdminPendingButton | Provides form-pending behavior and optional pending label. |
| Geometry | Minimum 2.35rem height, source control radius and focus-visible outline. |
States and feedback
- All five variants and disabled state are captured.
- Pending is source-defined; no live form mutation is exercised.
Usage rules
- Set type="button" explicitly for non-submit toolbar actions.
- Use one obvious primary task action per local group.
- Use danger for irreversible/destructive intent rather than ordinary review filtering.
- A navigation destination should be a link styled with the source button class, not a fake button redirect.
Accessibility and verification
Check focus visibility, meaningful disabled context and contrast for each theme. Some success colors use white text in both themes and require pairing checks.
Composition example
<AdminButton type="submit" variant="primary">Save story</AdminButton>
<AdminButton type="button" variant="secondary">Cancel</AdminButton>Source references
| File | Responsibility |
|---|---|
| components/admin-ui.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin/admin-pending-button.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1