UBO + Syncfusion Interaction States

This page lists common state patterns (hover, focus, active, disabled, selected) observed in the current generated Syncfusion theme used by UBO.

Source snapshot: packages/tailwind-config/compatibility/tailwind.css.

Global State Vocabulary

State Common selectors Meaning
Hover :hover, .e-hover Pointer-over visual affordance.
Focus :focus, .e-input-focus Keyboard/navigation focus visibility and active input context.
Active / pressed :active, .e-active Immediate pressed/engaged feedback.
Disabled :disabled, .e-disabled, .e-overlay Non-interactive or blocked controls.
Selected .e-active, .e-currentitem Persistent selected state in tabs/lists/pagers.

State Matrix By Component Family

Family Representative selectors Observed state behavior
Buttons .e-btn:hover, .e-btn:focus, .e-btn:active, .e-btn:disabled, .e-btn.e-primary:* Background/border tone changes across hover/focus/active; disabled reduces emphasis and removes elevation.
Inputs .e-input-group:hover, .e-input-group.e-input-focus, input.e-input:focus, .e-input-group.e-disabled Focus states add stronger ring/border cues; disabled states mute input/icon colors and clear-icon behavior.
Dropdown lists .e-dropdownbase .e-list-item.e-hover, .e-list-item.e-active, .e-list-item.e-item-focus Hover and keyboard-focus rows use neutral highlight; active indicates selected option.
Toolbar .e-toolbar .e-tbar-btn:hover, :focus, :active, nav hover/active selectors Toolbar buttons unify state treatment across normal, extended, and bigger modes.
Tabs .e-tab .e-toolbar-item.e-active, .e-tab .e-toolbar-item:hover, focused active tab selectors Active tab uses persistent indicator + text/icon emphasis; hover refines discoverability on non-active items.
Data controls (pager/grid ecosystem) .e-pager .e-currentitem, pager nav hover/focus patterns, row hover patterns in related grid themes Current/selected page uses persistent border/background emphasis, with additional hover/focus affordances.

Focus Ring Pattern Used Widely

A common accessible focus style in this theme uses a two-layer ring:

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #3e4760;

This appears across many interactive controls and should remain consistent unless a component has a clear reason to diverge.

Recommended Team Usage