Clickable

Add data-dn-clickable to a semantic button or link to apply Density’s interactive colors, pointer cursor, and focus treatment. The element keeps its native behavior; the attribute only supplies presentation.

Interactive states

Clickable elements respond to hover, keyboard focus, press, selected, and disabled states. Use native disabled on form controls, data-disabled on custom controls, and data-selected when the control represents a selected item.

import { useState } from "react";

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

export default function ClickableExample() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <View align="start" padding={false}>
      <button
        type="button"
        aria-pressed={isSelected}
        data-dn-clickable
        data-selected={isSelected ? "" : undefined}
        data-dn-emphasis="secondary"
        onClick={() => setIsSelected((currentValue) => !currentValue)}
      >
        {isSelected ? "Selected" : "Select item"}
      </button>
    </View>
  );
}

Use data-dn-emphasis and data-dn-color to choose the control’s visual priority and semantic status. Do not add data-dn-typable: elements with both attributes use the typable field treatment.