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.