Skip to content

Interaction

Active, hover and focus states for interactive elements.

Focus Ring

Focus rings should be used for all interactive elements, such as a CTA Button or Text Link. This will clearly indentify elements as interactive to keyboard users.

TokenDefault Value
focusRing.outlinenone
focusRing.transitionbox-shadow transitions.standard
focusRing.boxShadow0 0 0 0.2rem colors.canvas, 0 0 0 0.4rem colors.focus