Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

button-base

v4.5.2arrow_drop_down
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
12,056
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
2 months ago
SIZE
N/A
Prefer `ref` instead.
2 contributors
Use button-base in your project ?
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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
chevron_left
chevron_right

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.

Properties
NameTypeDescription
action
custom

A ref for imperative actions. It currently only supports focusVisible() action.

buttonRef
custom

Use ref instead.

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