Simulating States

Interactive components typically change their appearance when they are hovered, focused, and/or active (clicked/tapped). This is typically done using the CSS pseudo-classes :hover, :focus (or :focus-visible), and :active, respectively.

If you want to style a component to look like it’s in one of these states (without actually being in that state), you can use the utility classes, .hover, .focus, and .active, respectively.

Hover

The hover class corresponds to the :hover pseudo-class.

I’m a normal button I look hovered

Focus

The focus class corresponds to either :focus, :focus-visible, or :focus-within, depending on the component. In any case, it will correspond with the state in which the component would normally appear focused.

I’m a normal button I look focused

Active

The active class corresponds to the :active pseudo-class.

I’m a normal button I look active (pressed)

Combining Multiple States

You can combine these to achieve the desired effect. For example, a button being clicked is usually both active and hovered.

I’m a normal button I look like I’m being clicked