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

button-base

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
8,533
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
27 KB
`ButtonBase` contains as few styles as possible
1 contributor
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
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';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right
ButtonBase ()

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.

If true, the ripple starts at the center of the component rather than at the point of interaction.

Override or extend the styles applied to the component. See CSS API below for more details.

Properties
NameTypeDefault valueDescription
action
function

This object contains all possible actions that can be triggered programmatically.

buttonRef
function | object

Use that property to pass a ref callback to the native button component.

centerRipple
boolfalse

If true, the ripples will be centered. They won’t start at the cursor interaction position.

children
node

The content of the component.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
component
custom'button'

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
boolfalse

If true, the ripple effect will be disabled.

disableTouchRipple
boolfalse

If true, the touch ripple effect will be disabled.

focusRipple
boolfalse

If true, the base button will have a keyboard focus ripple. disableRipple must also be false.

focusVisibleClassName
string

This property 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
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'0'
TouchRippleProps
object

Properties applied to the TouchRipple element.

type
string'button'

Used to control the button’s purpose. This property passes the value to the type attribute of the native button component. Valid property values include button, submit, and reset.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
pulsate
boolfalse

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.