Simulated states

story.to.design can simulate states that are not args in Storybook and create variants for these states.

Available simulated states

Pseudo arg	values	Description
`:hover`	`true`/`false`	When a pointing device (such as a mouse or trackpad) is used to move over the component.
`:tap`	`true`/`false`	A finger/stylus tap on the component — effectively a click (full press and release), so it can toggle stateful components.
`:focus`	`true`/`false`	When the component has received focus.
`:active`	`true`/`false`	When using a mouse, “active” typically starts when the user presses down the primary mouse button.
`:viewport`	(*)	Size of the browser viewport. Component with CSS media queries will react to it.
`:appearance`	`light`/`dark`	This will set the `prefers-color-scheme`

(*) Possible values of :viewport are configurable in Import defaults

Press vs. toggle: :active only holds the pointer down — it never releases, so it won’t toggle stateful components. On a switch, checkbox or radio it shows the pressed look, which may look identical to the default state. Use :tap to capture the result of an actual click (e.g. a switch turned on).

How to use them in basic set-up

In basic set-up, add them from the ‘From simulated variants’ section of ‘Pre-made properties’:

Pseudo-states section when importing a component

How to use them in advanced setup

In advanced setup, use the pseudo args like args in the Variant Properties API.

Prototyping

Some of these states will automatically set up the component for prototyping.

Example

For instance for a button, you can have all those pseudo-states generated, and see the CSS impacting the button when story.to.design interacted with this button.