@primitives/button
v3.1.0
Published
`Button` is an element that receives pointer-like interactions. It can't be styled at all: it is designed to simply get out of the way and provide handlers for the interaction in the area covered by its children.
Downloads
38
Keywords
Readme
Button
is an element that receives pointer-like interactions. It can't be styled at all: it is designed to simply get out of the way and provide handlers for the interaction in the area covered by its children.
Hover-like handlers
onPointerEnter
: triggered when the pointer goes above the area of the componentonPointerLeave
: triggered when the pointer goes out of the area of the component
These map to Web only:
onPointerEnter
->onMouseEnter
onPointerLeave
->onMouseLeave
React Native does not currently support hover-like actions.
Press-like handlers
onPress
: triggered when a complete press action is done on the componentonPressIn
: triggered when the component is being pressedonPressOut
: triggered when the component stops being pressed
In Web:
onPress
->onClick
onPressIn
->onMouseDown
onPressOut
->onMouseUp
In Native:
onPress
->onPress
onPressIn
->onPressIn
onPressOut
->onPressOut
Focus-like handlers
onFocus
: triggered when the component gets the focusonBlur
: triggered when the component looses the focus
These map to Web only:
onFocus
->onFocus
onBlur
->onBlur
React Native does not currently support focus-like actions on Touchable components.
Raw type definitions
export type TIsHoveredHandlers = {
onPointerEnter?: () => void,
onPointerLeave?: () => void
}
export type TIsPressedHandlers = {
onPressIn?: () => void,
onPressOut?: () => void
}
export type TIsFocusedHandlers = {
onFocus?: () => void
onBlur?: () => void
}
export type TButtonProps = {
id?: string,
accessibilityLabel?: string,
isDisabled?: boolean,
shouldStretch?: boolean,
onPress?: () => void
} & TIsHoveredHandlers & TIsPressedHandlers & TIsFocusedHandlers