Pressable

An unstyled clickable surface: button semantics - keyboard activation, focus ring, disabled state - with none of a button's looks.

Accessibility

  • Enter and Space activate it and it lands in the tab order, whether it renders a native button or a shimmed element - you never write role, tabIndex, or onKeyDown yourself. Space is suppressed on keydown (so the page does not scroll) and fires on keyup, as a real button does.
  • Give it an accessible name: readable text among its children, or an aria-label when the content is icon-only.
  • The :focus-visible ring is keyboard-only. outline: none is the resting state, so pointer clicks show no ring.
  • Press feedback is decorative. Anything a sighted user learns from the press state must also be conveyed semantically - aria-pressed for a toggle, aria-expanded for a disclosure.