Actions overview
Controls for entering values, choosing options and committing intent.
Design thinking
Inputs, buttons and selection controls share one visual rhythm because they frequently occupy the same form row or toolbar. Consistency comes from their text metrics and boundary ownership, not a collection of fixed heights.
Size and spacing
2.125rem default (34px reference). The default action uses a 1.5rem line box, .25rem vertical padding and borders for a 2.125rem reference size. Choose the shared sm (1.75rem) or lg (2.5rem) variant for the entire row. Compound inputs own one outer border; icons follow the shared action icon token.
Interaction and motion
Selection uses a brighter surface and readable labels without decorative side bars or borders, never a muted disabled-looking fill. Selection and hover motion are on by default. The first selection snaps into place before paint, including non-first controlled values and hidden panels; only subsequent user changes animate. Keyboard focus, disabled states and reduced motion remain independent of pointer hover.
Best practices
- Use persistent labels and nearby validation feedback. A placeholder is not a label, and icon-only actions need accessible names.
- Keep one primary action per decision. Use a link for navigation and a button for an operation.
- Let text determine height. Textareas grow naturally; chat inputs grow to five lines, then scroll inside the input.
- Keep values, validation and async submission in the ViewModel. Show pending, error and disabled states without losing the user's input.