Learn more about the Hover and Active design states within Budibase

States, also known as pseudo-classes, let you apply a style to a component when it's in a special state i.e. when a user is hovering over a button.

Support States:


The :active state represents an component (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the mouse button.


The :hover state matches when the user interacts with a component, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor.

How to activate a state (example involves the Hover state)

  • Add component (only certain components accept transitions: links, text, buttons, containers).

  • Navigate to your Transition design properties

  • Select your property - 'All' is usually a safe bet

  • Set your duration

  • Setting your easing

  • Navigate to one of the hover state

  • Design your components 2nd state