Default
A native action with a stable accessible name.
Figma / Local contract / State coverage
Every state has a job.
Rendered action and form variants, including difficult content. Source-backed base styling; explicitly reconstructed state contracts.
Action state matrix
The public stylesheet defines action padding, radius, hover transitions and loading selectors. These local specimens adopt those foundations and make the complete local behavior explicit. Unobserved product-runtime states are not claimed.
Hover treatment
A native action with a stable accessible name.
Keyboard focus
A native action with a stable accessible name.
Disabled
No activation is dispatched.
Loading
No activation is dispatched.
Completed
A native action with a stable accessible name.
Long content
A native action with a stable accessible name.
Right-to-left
A native action with a stable accessible name.
Sizes and content slots
Small · 16px label
Default · 18px label
Large · 30px label
Secondary
Icon only · 44px hit area
Missing label is an invalid API
Do not render an action with no visible or accessible name. Provide a destination or omit the control.
Field states
Placeholder supplements the visible label.
Enter a complete email address, such as name@example.com.
Unavailable controls are skipped by Tab.
Read-only text remains selectable and focusable.
Native input scrolling preserves the full value.
Space toggles the native checkbox; use a visible label.
Copyable action contract
<button class="button" aria-busy="true" aria-disabled="true">
Prepare preview <span aria-hidden="true">◌</span>
</button>
// Guard activation while aria-disabled=true.
// Keep label and reserved progress width stable.
// Announce progress through one adjacent role=status.Geometry and event ownership
Buttons own12px top/bottom and22px left/right padding,1px border and8px radius. Small buttons use16px text and46px minimum height; default18px/48px; large30px/84px with24px vertical padding and16px radius. These are exact local contracts; measured source fractional heights remain in the component ledger. The parent grid owns24px inter-specimen spacing. Labels own no outer margin; fields use8px top margin and12px/14px internal padding. Error text follows at12px.
Pointer release or native keyboard activation triggers the action. Disabled and busy specimens ignore activation. Repeated input cannot start another operation. State updates must preserve focus unless an element is removed; removal requires an explicit surviving focus target. Reduced motion disables decorative transitions, and forced-colors retains borders and visible focus.
Boundary and regression
The marked hover/focus examples are persistent demonstrations, not a claim that the pointer or keyboard is presently focused. They are labeled to avoid confusing visual state with actual input state. Test390/768/1440px, long content, RTL, forced colors, reduced motion, disabled/busy activation, and accessible names. The full extension contracts define loading timing and failure recovery.