Interactive
The interactive primitives. Pressable is the base — Button and IconButton are Pressables with a variant matrix and a styled surface layered on.
The pieces
| Component | Use it for |
|---|---|
| Pressable | The interactive atom. An unstyled, accessible tap target. |
| Button | A labelled button with a variant × intent × size matrix. |
| IconButton | A square, icon-only button. aria-label is required. |
Pressable does the contract
Pressable is the interactive base. It renders a <button> by default, handles the
cross-platform onPress alias, mirrors disabled into aria-disabled so non-button surfaces
still read as disabled, and suppresses clicks while disabled. It carries no visual opinion — no
colour, no padding, no border.
Button and IconButton are Pressables with a styled surface. They add the variant matrix
(variant × intent × size), the loading state, the icon slots — but the interactive
contract underneath is Pressable's, unchanged.
Action, not navigation
Everything in this family triggers an action — it runs a handler, it does not move the user to a
new URL. For navigation, reach for Link: it renders an <a>, so the
browser's navigation, the right-click menu, and "open in new tab" all work as a user expects.
A button that navigates and a link that runs script both break user expectations. Match the element to the behaviour.