Reveal

Add data-dn-reveal to a container and data-dn-reveal-target to its children to switch content when the container is hovered or contains focus. Use data-dn-reveal-target="hover" for actions that appear while active and data-dn-reveal-target="not-hover" for the resting content.

Contextual actions

import { View } from "density-base-ui";

export default function RevealExample() {
  return (
    <View align="start" padding={false}>
      <div data-dn-reveal>
        <span data-dn-reveal-target="not-hover">Hover to reveal actions</span>
        <button type="button" data-dn-clickable data-dn-reveal-target="hover">
          Edit
        </button>
      </div>
    </View>
  );
}

Reveal behavior applies on devices that support hover. Keyboard focus also reveals the active target, so controls remain available to keyboard users; keep essential actions available by another path on touch devices.