Button emphasis, destructive actions, and shared icon actions.
Accessibility: Use native types and disabled states, stable accessible names and visible keyboard focus. Color does not explain destructive behavior. Applications own action feedback and confirmation. APG button guidance.
Native submit, button, and reset types provide primary, secondary, and tertiary emphasis. Existing emphasis styles keep their text color on hover. Text and destructive actions below demonstrate the new optional treatments; their clicks only report local example state.
Primary text contrast: 9.40:1 resting, 15.36:1 hovered.
Text actions reveal their face and border on hover or keyboard focus. Delete starts as red text; hover and disabled states use the red outline.
Application styles own the properties they set, including hover. The global keyboard focus ring remains.
Try an action. No data changes.
Primary text contrast: 7.98:1 resting, 10.79:1 hovered (existing light gray).
Text actions reveal their face and border on hover or keyboard focus. Delete starts as red text; hover and disabled states use the red outline.
Application styles own the properties they set, including hover. The global keyboard focus ring remains.
Try an action. No data changes.
Only the application-shell footer receives page-specific margin and alignment.
Use a named native button with data-barba-variant="icon" and data-barba-shape="icon". Add data-barba-size="compact" for a smaller face. Hide decorative icon SVGs from assistive technology. The accessible name describes the actual action; close, clear, remove, and destructive deletion have different meanings.
Applications own visibility, disabled states, and focus transitions. Try clearing a field, removing a chip, or closing a dialog. See the shared icon-action markup and target guidance.