Skip to main content

How to Add States

Different states are available for some components, here are a few of them:

  • hover โ€” state triggered when hovering over an element
  • focus โ€” state when an element gets focus
  • active, for a <Button/> and an <Input/> โ€” state when an element is active
  • disabled, for a <Button/> โ€” state when a button is disabled
  • link, for a <Link/> โ€” state for an unvisited link
  • visited, for a <Link/> โ€” state for a visited link

and more

You can also specify properties and values for such states in your code using the following syntax: state-props="value". For example:

<Text hover-color="orange"> Orange text </Text>