Available simulated states
|When a pointing device (such as a mouse or trackpad) is used to move over the component.|
|When a stylus or finger “touches” the component (on touch-screens).|
|When the component has received focus.|
|When using a mouse, “active” typically starts when the user presses down the primary mouse button.|
|(*)||Size of the browser viewport. Component with CSS media queries will react to it.|
|This will set the |
(*) 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:
How to use them in advanced setup
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 story.to.design interacted with this button.