Interaction State Styles

Components from the Input Controls group support dedicated style properties for their interactive states.

The states occur on basic user interactions with UI:

Hover

Applies when a component is hovered by a cursor.

Discarded when the cursor is gone or if the next state occurs.

Active

Applies when a component is being clicked with a cursor or an Enter key.

Discarded when the mouse button or the Enter key is released.

Focus

Applies when a component is in focus after a mouse click or a keyboard hotkey.

Discarded if another component enters the focus state.

Each state has a separate style property in the components’ Element Style property group. CSS properties added to those fields apply while the component is in the corresponding state.

Setting Interaction State Styles

Let’s look at one of the most common cases, which is styling a Button component in all its states.

  1. In the UI Builder, add a Button component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the base styles to the Element CSS Style property:

height: auto;
margin: auto;
font-size: 40px;
letter-spacing: 0.8px;
font-weight: 400;
padding: 32px 64px;
border-radius: 40px;
background: radial-gradient(circle, royalblue 0%, fuchsia 100%);
box-shadow: 0 6px 32px 0 rgba(100,120,140,0.64);
transition: 0.24s ease-out;

  1. Add the hover state styles to the Hover Style property:

transform: scale(0.95);
filter: brightness(1.2);
box-shadow: 0 4px 24px 0 rgba(100,120,140,0.8);

  1. Add the active state styles to the Active Style property:

transform: scale(0.925);
filter: brightness(1);
box-shadow: 0 2px 16px 0 rgba(100,120,140,1);

  1. Add the focus styles to the Focus Style property:

:not(:active) {
  outline: solid 6px indigo;
}

  1. All styles are applied once each field is out of focus. Check the results on the dashboard.

Read more about the used transition CSS property in the Animated Style Transitions article.

Was this page helpful?