Button

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

Installation

``bash
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 | No | A ref to the button element. This is useful if you want to access the button element directly. |
| slots | Record | No | An object that contains the customizations for the slots.
The main way you interact with the slot system as a consumer. |

Examples

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

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

);
}
``