Skip to main content

How to Add States

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

  • hover — a 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>