Change component and element styles with four types of display logic. Each type triggers a style change based on a data value or user interaction with the UI.

Conditional display logic types

Rendering

Hide a button, table row, or some other visual element until a user takes a specific action, or when queried data meets a specific condition.

Enabling

Show UI elements, like submit buttons, but disable their interactivity until a specific condition is met.

Styling

Turn a component neon pink when a user creates a new table row or, for a more normal use case, create brand-specific hover states.

Opening

Set whether or not a component loads in your app in an open or closed state.

Learn more about display logic