Simulated states can simulate states that are not args in Storybook and create variants for these states.

Available simulated states

Pseudo argvaluesDescription
:hovertrue/falseWhen a pointing device (such as a mouse or trackpad) is used to move over the component.
:taptrue/falseWhen a stylus or finger “touches” the component (on touch-screens).
:focustrue/falseWhen the component has received focus.
:activetrue/falseWhen 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.
:appearancelight/darkThis will set the prefers-color-scheme

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

How to use them in basic set-up

In basic set-up, check the pseudo args:

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.


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


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

Example of a button imported with pseudo-states