Interaction Patterns
Interaction patterns, component states and accessibility guidelines based on components documented in ZUD and UX best practices.
| State | Visual Treatment | Tokens | Implementation |
|---|---|---|---|
Default ButtonsLinksForm inputs | Standard colors and shadows | --primary --text-standard --shadow-elevation-01 | Base styling without modifiers |
Hover Button hoverCard hoverLink hover | Subtle color change or shadow increase | hover:shadow-md hover:bg-[color]/80 --shadow-elevation-02 | CSS :hover pseudo-class |
Focus Form focusButton focusLink focus | Ring outline for keyboard users | focus:ring-2 focus:ring-[color] --ring | CSS :focus-visible for accessibility |
Active/Pressed Button pressMenu item selectToggle active | Pressed appearance or color darkening | active:bg-[color]/90 active:scale-95 | CSS :active pseudo-class |
Disabled Disabled buttonsInactive form fieldsLocked features | Reduced opacity or muted colors | disabled:opacity-50 disabled:cursor-not-allowed | disabled attribute + CSS styling |
Loading Loading buttonsData fetchingForm submission | Spinner or skeleton loading | animate-pulse animate-spin opacity-75 | Loading indicators with animations |