Tap Area
Add hover and press interaction states to clickable regions like navigation items and cards.
@volvo-cars/css v2.5.1
When to use
Section titled “When to use”Use a tap area to add consistent hover and press feedback to a semantic link or button with a larger visual region, such as a navigation item or content card.
Rich interactive regions
Section titled “Rich interactive regions”For a card that contains secondary links or buttons, keep those controls independent and mark the primary action with data-tap-area-target. This expands the primary action across the card without nesting interactive elements.
Backgrounds
Section titled “Backgrounds”Tap areas are transparent at rest by default. Set --background-color when the region needs a persistent surface; the interaction overlays blend with that surface.