@bento/button

Button

The @bento/button package exports the Button component, which is a complete button component built on top of the Pressable primitive.

Installation

npm install --save @bento/button

Props

The following properties are available to be used on the Button component:

Prop	Type	Required	Description
children	ReactNode	Yes	The content to display inside the button.
onPress	(e: PressEvent) => void	No	Handler that is called when the pressable is pressed.
Similar to the standard onClick event, but normalized to handle all interaction methods consistently.
onPressStart	(e: PressEvent) => void	No	Handler that is called when a press interaction starts.
onPressEnd	(e: PressEvent) => void	No	Handler that is called when a press interaction ends, either
over the target or when the pointer leaves the target.
onPressChange	(isPressed: boolean) => void	No	Handler that is called when the press state changes.
onPressUp	(e: PressEvent) => void	No	Handler that is called when a press is released over the target, regardless of
whether it started on the target or not.
slot	string	No	A named part of a component that can be customized. This is implemented by the consuming component.
The exposed slot names of a component are available in the components documentation.
childRef	Ref<HTMLButtonElement>	No	A ref to the button element. This is useful if you want to access the button element directly.
slots	Record<string, object | Function>	No	An object that contains the customizations for the slots.
The main way you interact with the slot system as a consumer.

Examples

import { Button } from '@bento/button';
/* v8 ignore next */
import React from 'react';

export function ButtonExample() {
  return (
    <Button
      onPress={function handlePress() {
        console.log('button pressed!');
      }}
    >
      Click me!
    </Button>
  );
}