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>
  );
}