button-base

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

166,914

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

31 KB

Prefer `ref` instead.

2 contributors

Install button-base as a package?

Copied

npm i @bit/mui-org.material-ui.button-base

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Prefer ref instead.

utility to create component types that inherit props from ButtonBase. This component has an additional overload if the href prop is set which can make extension quite tricky

ButtonBase contains as few styles as possible. It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic. Demos:

Buttons

API:

ButtonBase API

ButtonBase contains as few styles as possible. It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic.

Properties

Name	Type	Description
action	`custom`	A ref for imperative actions. It currently only supports `focusVisible()` action.
buttonRef	`custom`	Use that prop to pass a ref to the native button component.
centerRipple	`bool`	If `true`, the ripples will be centered. They won’t start at the cursor interaction position.
children	`node`	The content of the component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
component	`custom`	The component used for the root node. Either a string to use a DOM element or a component.
disabled	`bool`	If `true`, the base button will be disabled.
disableRipple	`bool`	If `true`, the ripple effect will be disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`.
disableTouchRipple	`bool`	If `true`, the touch ripple effect will be disabled.
focusRipple	`bool`	If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`.
focusVisibleClassName	`string`	This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It’s a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a `focus-visible` class to other components if needed.
onBlur	`function`
onClick	`function`
onDragLeave	`function`
onFocus	`function`
onFocusVisible	`function`	Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.
onKeyDown	`function`
onKeyUp	`function`
onMouseDown	`function`
onMouseLeave	`function`
onMouseUp	`function`
onTouchEnd	`function`
onTouchMove	`function`
onTouchStart	`function`
role	`string`
tabIndex	`number \| string`
TouchRippleProps	`object`	Props applied to the `TouchRipple` element.
type	`'submit' \| 'reset' \| 'button'`	Used to control the button’s purpose. This prop passes the value to the `type` attribute of the native button component.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
in	`bool`	injected from TransitionGroup
onExited	`function`	injected from TransitionGroup
pulsate	`bool`	If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
rippleSize	`number`	Diameter of the ripple.
rippleX	`number`	Horizontal position of the ripple center.
rippleY	`number`	Vertical position of the ripple center.
timeout (required)	`number`	exit delay
center	`bool`	If `true`, the ripple starts at the center of the component rather than at the point of interaction.
classes (required)	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`