Button

Button widget, wraps and styles a regular <button> element. Can display text and icon and also allows specifying button color. Supports different appearances, by setting rendition to one of:

'text' - Flat appearance with text only, no background or border
'outlined' - Transparent button with border
'tonal' - Flat appearance with "soft" background color
'filled' - Flat appearance with stronger background color
'elevated' - Raised appearance

Button renditions

//<code-header>
fiddle.title = 'Button renditions';
//</code-header>
targetElement.style.gridTemplateColumns = 'auto auto auto auto';
const
    onClick = () => Toast.show('Button clicked'),
    renditions = ['text', 'outlined', 'tonal', 'filled', 'elevated'];

for (const rendition of renditions) {
    new Button({
        appendTo : targetElement,
        text     : StringHelper.capitalize(rendition),
        width    : '9em',
        rendition,
        onClick
    });

    new Button({
        appendTo : targetElement,
        icon     : 'fa-flask',
        text     : StringHelper.capitalize(rendition),
        width    : '9em',
        rendition,
        onClick
    });

    new Button({
        appendTo : targetElement,
        icon     : 'fa-cog',
        rendition,
        onClick
    });

    new Button({
        appendTo : targetElement,
        icon     : 'fa-times',
        disabled : true,
        rendition,
        onClick
    });
}

// Green button with text and icon
const button = new Button({
    appendTo : document.body,
    icon    : 'fa-plus-circle',
    text    : 'Add',
    color   : 'b-green',
    onClick : () => {}
});

Buttons can also have a menu that is shown on click, or on click or hover of only the menu icon part of the button (if split is set):

Button with menu

//<code-header>
fiddle.title = 'Button with menu';
//</code-header>

const renditions = ['text', 'outlined', 'tonal', 'filled', 'elevated'];

for (const rendition of renditions) {
    new Button({
        appendTo : targetElement,
        icon     : 'fa-chart-line',
        rendition,
        menu     : [
            { icon : 'fa fa-chart-pie', text : 'Item 1', onItem : () => console.log('Item 1 activated') },
            { icon : 'fa fa-chart-bar', text : 'Item 2', onItem : () => console.log('Item 2 activated') }
        ]
    });

    new Button({
        rendition,
        text     : 'Settings button',
        icon     : 'fa-cog',
        appendTo : targetElement,
        menu     : {

            // Other menu configs can be passed here

            items : [
                { icon : 'fa fa-hammer', text : 'Item 1', onItem : () => console.log('Item 1 activated') },
                { icon : 'fa fa-wrench', text : 'Item 2', onItem : () => console.log('Item 2 activated') }
            ]
        }
    });

    new Button({
        rendition,
        text     : 'Settings button',
        icon     : 'fa-cog',
        appendTo : targetElement,
        split    : 'hover',
        menu     : {

            // Other menu configs can be passed here

            items : [
                { icon : 'fa fa-hammer', text : 'Item 1', onItem : () => console.log('Item 1 activated') },
                { icon : 'fa fa-wrench', text : 'Item 2', onItem : () => console.log('Item 2 activated') }
            ]
        }
    });
}

const button = new Button({
    appendTo : document.body,
    icon    : 'fa-chart',
    menu    : {
        items : [
            {
                text : 'Click me',
                onItem : () => console.log('I was clicked')
            }
        ]
    }
});

In the case of a button which is part of a complex UI within a larger Bryntum widget, use of the string form for handlers is advised. A handler which starts with 'up.' will be resolved by looking in owning widgets of the Button. For example a Calendar may have handlers for its buttons configured in:

new Calendar({
    appendTo : document.body,
    project  : myProjectConfig,
    sidebar  : {
        items : {
            addNew : {
                weight  : 0,
                text    : 'New',

                // The Button's ownership will be traversed to find this function name.
                // It will be called on the outermost Calendar widget.
                onClick : 'up.onAddNewClick'
            }
        }
    },

    // Button handler found here
    onAddNewClick() {
        // Use Calendar API which creates event in the currently active date
        this.createEvent();
    }
});

This class may be operated by the keyboard. Space presses the button and invokes any click handler, and ArrowDown activates any configured menu.

Configs

Common

listenersEvents

Other

behaviorType: button | submit | reset= buttonAlso a property

The button behavioral type, will be applied as a type attribute to this button's element.

href: StringAlso a property

If provided, turns the button into a link.

Not compatible with the adopt config.

icon: StringAlso a property

Button icon class, a developer-defined CSS class string which results in the desired icon.

Note that demos use Font Awesome icons, but no icons are actually built in.

This may also be configured as the URL of an image (Detected by searching for a / in the string).

iconAlign: start | end= startAlso a property

Button icon alignment. May be 'start' or 'end'. Defaults to 'start'

menuIcon: String= b-icon-pickerAlso a property

The menu icon class to show when the button has a menu. Set to null to not show a menu icon.

Note that demos use Font Awesome icons, but no icons are actually built in.

pressed: Boolean= falseAlso a property

Initially pressed or not. Only applies with toggleable = true.

const toggleButton = new Button({
   toggleable : true,
   text : 'Enable cool action'
});

pressedCls: StringAlso a property

A CSS class to add to the pressed state of the button. A b-pressed CSS class is always added, when a button is pressed.

pressedIcon: StringAlso a property

Icon class for the buttons pressed state, a developer-defined CSS class string which results in the desired icon. Only applies to toggle buttons

Note that demos use Font Awesome icons, but no icons are actually built in.

new Button({
   // Icon for unpressed button
   icon        : 'fa-wine-glass',

   // Icon for pressed button
   pressedIcon : 'fa-wine-glass-alt',

   // Only applies to toggle buttons
   toggleable  : true
});

Predefined style to use for the button. Possible values are:

'elevated' - Raised button with box-shadow
'filled' - Filled with the primary color
'tonal' - Filled with a faded shade of the primary color
'outlined' - Outlined with borders and pale or transparent fill
'text' - Transparent text-only button

The supplied value will be part of the button's class list, as b-button-{rendition}.

If no value is provided, a default rendition will be determined based on the theme.

split: Boolean | mouseover | hover= falseAlso a property

Set to true to create a split button. A split button has a main action and a dropdown arrow to show a menu.

The menu only shows when the arrow is clicked, not when the main button is clicked.

Set to 'mouseover' to show the menu when hovering the arrow part of the button as well as when toggling by clicking it.

Set to 'hover' to show the menu only when hovering the arrow part of the button - the menu will hide when the mouse leaves the icon to outside of the icon or menu.

The button will only toggle its pressed state and action its click handler when the main part of the button is clicked.

supportsPressedClick: Boolean= false

Set to true to perform action on clicking the button if it's already pressed and belongs to a toggleGroup.

tabIndex: NumberAlso a property

The tab index of the button, or null for natural tab order (recommended). Setting to 0 is equivalent to natural tab order, but is unnecessary for buttons since they are naturally tabbable (i.e., accessible via the TAB key). Setting to -1 disables tabbability but allows for focus to be set to the element programmatically.

From MDN documentation:

Warning: You are recommended to only use 0 and -1 as tabindex values. Avoid using tabindex values greater than 0 and CSS properties that can change the order of focusable HTML elements (Ordering flex items). Doing so makes it difficult for people who rely on using keyboard for navigation or assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

target: StringAlso a property

The target attribute for the href config

text: String | DomConfig | DomConfig[]Also a property

The button's text. You can also supply a DomConfig or an array of DomConfigs for complex button content.

toggleable: Boolean= falseAlso a property

Enabled toggling of the button (stays pressed when pressed).

toggleGroup: StringAlso a property

Indicates that this button is part of a group where only one button can be pressed. Assigning a value also sets toggleable to true.

When part of a ButtonGroup, you can set toggleGroup on it as an alternative to on each button. This config can then be used to override that value if needed.

const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

detectCSSCompatibilityIssuesWidget

rtlRTL

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

CSS

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

styleWidget

uiWidget

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

titleWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

dockWidget

flexWidget

heightWidget

hiddenWidget

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

Misc

badgeBadge

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

tooltipWidget

Scrolling

scrollableWidget

Properties

Class hierarchy

isButton: Boolean= truereadonly

Identifies an object as an instance of Button class, or subclass thereof.

isButton: Boolean= truereadonlystatic

Identifies an object as an instance of Button class, or subclass thereof.

isBadgeBadge

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isRTLRTL

isWidgetWidget

Other

behaviorType: button | submit | reset= buttonAlso a config

The button behavioral type, will be applied as a type attribute to this button's element.

href: StringAlso a config

If provided, turns the button into a link.

Not compatible with the adopt config.

icon: StringAlso a config

Button icon class, a developer-defined CSS class string which results in the desired icon.

Note that demos use Font Awesome icons, but no icons are actually built in.

This may also be configured as the URL of an image (Detected by searching for a / in the string).

iconAlign: start | end= startAlso a config

Button icon alignment. May be 'start' or 'end'. Defaults to 'start'

menuIcon: String= b-icon-pickerAlso a config

The menu icon class to show when the button has a menu. Set to null to not show a menu icon.

Note that demos use Font Awesome icons, but no icons are actually built in.

pressed: Boolean= falseAlso a config

Initially pressed or not. Only applies with toggleable = true.

const toggleButton = new Button({
   toggleable : true,
   text : 'Enable cool action'
});

pressedCls: StringAlso a config

A CSS class to add to the pressed state of the button. A b-pressed CSS class is always added, when a button is pressed.

pressedIcon: StringAlso a config

Icon class for the buttons pressed state, a developer-defined CSS class string which results in the desired icon. Only applies to toggle buttons

Note that demos use Font Awesome icons, but no icons are actually built in.

new Button({
   // Icon for unpressed button
   icon        : 'fa-wine-glass',

   // Icon for pressed button
   pressedIcon : 'fa-wine-glass-alt',

   // Only applies to toggle buttons
   toggleable  : true
});

Predefined style to use for the button. Possible values are:

'elevated' - Raised button with box-shadow
'filled' - Filled with the primary color
'tonal' - Filled with a faded shade of the primary color
'outlined' - Outlined with borders and pale or transparent fill
'text' - Transparent text-only button

The supplied value will be part of the button's class list, as b-button-{rendition}.

If no value is provided, a default rendition will be determined based on the theme.

split: Boolean | mouseover | hover= falseAlso a config

Set to true to create a split button. A split button has a main action and a dropdown arrow to show a menu.

The menu only shows when the arrow is clicked, not when the main button is clicked.

Set to 'mouseover' to show the menu when hovering the arrow part of the button as well as when toggling by clicking it.

Set to 'hover' to show the menu only when hovering the arrow part of the button - the menu will hide when the mouse leaves the icon to outside of the icon or menu.

The button will only toggle its pressed state and action its click handler when the main part of the button is clicked.

tabIndex: NumberAlso a config

From MDN documentation:

target: StringAlso a config

The target attribute for the href config

text: String | DomConfig | DomConfig[]Also a config

The button's text. You can also supply a DomConfig or an array of DomConfigs for complex button content.

toggleable: Boolean= falseAlso a config

Enabled toggling of the button (stays pressed when pressed).

toggleGroup: StringAlso a config

Indicates that this button is part of a group where only one button can be pressed. Assigning a value also sets toggleable to true.

When part of a ButtonGroup, you can set toggleGroup on it as an alternative to on each button. This config can then be used to override that value if needed.

const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});

$namestaticWidget

catchEventHandlerExceptionsEvents

columnWidget

convertPinchToMousewheelstaticWidget

rtlRTL

spanWidget

typestaticWidget

Accessibility

focusVisibleWidget

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget

contentWidget

contentElementWidget

datasetWidget

elementWidget

focusableElementWidget

focusElementWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

overflowElementWidget

styleWidget

Float & align

anchorSizeWidget

maximizeOnMobileWidget

xWidget

yWidget

Layout

alignSelfWidget

flexWidget

heightWidget

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

scrollableWidget

widthWidget

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

badgeBadge

callOnFunctionsEvents

cellInfoWidget

disabledWidget

localeHelperLocalizable

localeManagerLocalizable

readOnlyWidget

refWidget

tabWidget

tooltipWidget

Visibility

hiddenWidget

isVisibleWidget

Widget hierarchy

containsFocusWidget

nextSiblingWidget

ownerWidget

parentWidget

previousSiblingWidget

Functions

Other

eachWidget

Iterate over all widgets owned by this widget and any descendants.

Note: Due to this method aborting when the function returns false, beware of using short form arrow functions. If the expression executed evaluates to false, iteration will terminate.

Due to the menu config being a lazy config and only being converted to be a Menu instance just before it's shown, the menu will not be part of the iteration before it has been shown once.

Parameter	Type	Description
`fn`	function	A function to execute upon all descendant widgets. Iteration terminates if this function returns `false`.
`deep`	Boolean	Pass as `false` to only consider immediate child widgets.

Returns: Boolean -

Returns true if iteration was not aborted by a step returning false

toggle

Toggle button state (only use with toggleable = true)

Parameter	Type	Description
`pressed`	Boolean	Specify to force a certain toggle state

addListenerEvents

announceAriaLiveWidget

composeWidget

createOnFrameDelayable

disableWidget

enableWidget

exitFullscreenWidget

focusWidget

hasListenerEvents

LstaticLocalizable

maskWidget

onEvents

recomposeWidget

relayAllEvents

removeAllListenersEvents

removeListenerEvents

requestFullscreenWidget

resumeEventsEvents

revertFocusWidget

suspendEventsEvents

triggerEvents

unEvents

unmaskWidget

setXYWidget

showByWidget

toFrontWidget

Lifecycle

constructBase

constructorBase

createstaticWidget

destroystaticBase

doDestroyBase

initClassstaticWidget

setConfigBase

Misc

animatePropertyBase

attachTooltipstaticWidget

callbackBase

downloadTestCaseBase

fromElementstaticWidget

fromSelectorstaticWidget

getByIdstaticWidget

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Visibility

hideWidget

showWidget

Widget hierarchy

closestWidget

containsWidget

eachAncestorWidget

ownsWidget

queryWidget

queryAllWidget

upWidget

Events

action

Fires when the default action is performed (the button is clicked)

// Adding a listener using the "on" method
button.on('action', ({ source, event, domEvent }) => {

});

Parameter	Type	Description
`source`	Button	The button
`event`	Event	DEPRECATED - Use domEvent instead.
`domEvent`	Event	The triggering DOM event. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

beforeShowMenu

This event is triggered when the button's menu is about to be shown.

// Adding a listener using the "on" method
button.on('beforeShowMenu', ({ source, menu, userAction, domEvent }) => {

});

Parameter	Type	Description
`source`	Button	This Button instance.
`menu`	Menu	This button's menu instance.
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

beforeToggle

Fires before the button is toggled (the pressed state is changed). If the button is part of a toggleGroup and you need to process the pressed button only, consider using click event or action event. Return false to prevent the toggle to the new pressed state.

// Adding a listener using the "on" method
button.on('beforeToggle', ({ source, pressed, userAction, domEvent }) => {

});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

click

Fires when the button is clicked

// Adding a listener using the "on" method
button.on('click', ({ source, event, domEvent }) => {

});

Parameter	Type	Description
`source`	Button	The button
`event`	Event	DEPRECATED - Use domEvent instead.
`domEvent`	Event	The triggering DOM event. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

toggle

Fires when the button is toggled via a UI interaction (the pressed state is changed). If the button is part of a toggleGroup and you need to process the pressed button only, consider using click event or action event.

// Adding a listener using the "on" method
button.on('toggle', ({ source, pressed, userAction, domEvent }) => {

});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

beforeDestroyEvents

beforeHideWidget

beforeShowWidget

catchAllEvents

destroyEvents

elementCreatedWidget

focusInWidget

focusOutWidget

hideWidget

paintWidget

readOnlyWidget

recomposeWidget

resizeWidget

showWidget

Event handlers

onAction

Called when the default action is performed (the button is clicked)

new Button({
    onAction({ source, event, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Button	The button
`event`	Event	DEPRECATED - Use domEvent instead.
`domEvent`	Event	The triggering DOM event. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

onBeforeShowMenu

This event is called when the button's menu is about to be shown.

new Button({
    onBeforeShowMenu({ source, menu, userAction, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Button	This Button instance.
`menu`	Menu	This button's menu instance.
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

onBeforeToggle

Called before the button is toggled (the pressed state is changed). If the button is part of a toggleGroup and you need to process the pressed button only, consider using click event or action event. Return false to prevent the toggle to the new pressed state.

new Button({
    onBeforeToggle({ source, pressed, userAction, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

onClick

Called when the button is clicked

new Button({
    onClick({ source, event, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Button	The button
`event`	Event	DEPRECATED - Use domEvent instead.
`domEvent`	Event	The triggering DOM event. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

onToggle

Called when the button is toggled via a UI interaction (the pressed state is changed). If the button is part of a toggleGroup and you need to process the pressed button only, consider using click event or action event.

new Button({
    onToggle({ source, pressed, userAction, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Button	Toggled button
`pressed`	Boolean	New pressed state
`userAction`	Boolean	`true` if the toggle was triggered by a user action (click), `false` if it was triggered programmatically.
`domEvent`	Event	The original DOM event that triggered the action, if any. Using the `pointerType` property of this event can help determine if it was a mouse, touch or pen action.

onBeforeDestroyEvents

onBeforeHideWidget

onBeforeShowWidget

onCatchAllEvents

onDestroyEvents

onElementCreatedWidget

onFocusInWidget

onFocusOutWidget

onHideWidget

onPaintWidget

onReadOnlyWidget

onRecomposeWidget

onResizeWidget

onShowWidget

Typedefs

AlignSpecWidget

BryntumListenerConfigEvents

CellWidgetContextWidget

ColorWidget

DelayableConfigDelayable

KeyMapConfigKeyMap

CSS variables

100

Name	Description
`--b-button-box-shadow`	Button box-shadow, overridden by renditions
`--b-button-text-align`	Button text-align
`--b-button-icon-only-border-radius`	Border-radius for icon-only buttons
`--b-button-font-weight`	Button text font-weight
`--b-button-gap`	Gap between icon and label
`--b-button-height`	Button height
`--b-button-icon-padding-inline`	Inline padding for buttons with icon
`--b-button-end-icon-padding-inline`	Inline padding for buttons with icon at the end
`--b-button-menu-padding-inline`	Inline padding for buttons with menu
`--b-button-opacity`	Button opacity
`--b-button-padding-inline`	Text-only button inline padding
`--b-button-border-radius`	Button border-radius
`--b-button-elevated-box-shadow`	ElevatedBox-shadow for elevated buttons
`--b-button-elevated-color`	ElevatedText color for elevated buttons
`--b-button-filled-color`	FilledText color for filled buttons
`--b-button-tonal-border-width`	TonalBorder width for tonal buttons
`--b-button-outlined-border-width`	OutlinedBorder width for outlined buttons
`--b-button-outlined-border-color`	OutlinedBorder color for outlined buttons
`--b-button-outlined-background`	OutlinedBackground for outlined buttons
`--b-button-type-text-background`	TextBackground for text buttons
`--b-button-elevated-background`	ElevatedBackground for elevated buttons
`--b-button-filled-background`	FilledBackground for filled buttons
`--b-button-outlined-hover-border-color`	OutlinedBorder color for hovered outlined buttons
`--b-button-outlined-color`	OutlinedText color for outlined buttons
`--b-button-tonal-background`	TonalBackground for tonal buttons
`--b-button-tonal-color`	TonalText color for tonal buttons
`--b-button-tonal-border-color`	TonalBorder color for tonal buttons
`--b-button-type-text-color`	TextText color for text buttons
Active
`--b-button-active-box-shadow`	Box-shadow for active buttons, overridden by renditions
`--b-button-elevated-active-box-shadow`	ElevatedBox-shadow for active elevated buttons
`--b-button-elevated-active-background`	ElevatedBackground for active elevated buttons
`--b-button-filled-active-background`	FilledBackground for active filled buttons
`--b-button-outlined-active-background`	OutlinedBackground for active outlined buttons
`--b-button-tonal-active-background`	TonalBackground for active tonal buttons
`--b-button-type-text-active-background`	TextBackground for active text buttons
Disabled
`--b-button-disabled-opacity`	Opacity for disabled buttons
`--b-button-disabled-border-color`	Border-color for disabled buttons
`--b-button-outlined-disabled-background`	OutlinedBackground for disabled outlined buttons
`--b-button-outlined-disabled-border-color`	OutlinedBorder color for disabled outlined buttons
`--b-button-type-text-disabled-background`	TextBackground for disabled text buttons
`--b-button-disabled-background`	Background for disabled buttons
`--b-button-disabled-color`	Disabled button text color
Focused
`--b-button-focus-outline-width`	Focus outline width
`--b-button-focus-outline-offset`	Focus outline offset
`--b-button-focus-box-shadow`	Box-shadow for focused buttons, overridden by renditions
`--b-button-focus-border-color`	Border-color for focused buttons, overridden by renditions
`--b-button-elevated-focus-box-shadow`	ElevatedBox-shadow for focused elevated buttons
`--b-button-outlined-focus-border-color`	OutlinedBorder color for focused outlined buttons
`--b-button-type-text-focused-background`	Background for focused text buttons
`--b-button-focus-outline-color`	Focus outline color
`--b-button-elevated-focused-background`	ElevatedBackground for focused elevated buttons
`--b-button-filled-focused-background`	FilledBackground for focused filled buttons
`--b-button-outlined-focused-background`	OutlinedBackground for focused outlined buttons
`--b-button-tonal-focused-background`	TonalBackground for focused tonal buttons
Hovered
`--b-button-hover-box-shadow`	Box-shadow for hovered buttons, overridden by renditions
`--b-button-elevated-hover-box-shadow`	ElevatedBox-shadow for hovered elevated buttons
`--b-button-filled-hover-box-shadow`	FilledBox-shadow for hovered filled buttons
`--b-button-tonal-hover-box-shadow`	TonalBox-shadow for hovered tonal buttons
`--b-button-elevated-hover-background`	ElevatedBackground for hovered elevated buttons
`--b-button-filled-hover-background`	FilledBackground for hovered filled buttons
`--b-button-outlined-hover-background`	OutlinedBackground for hovered outlined buttons
`--b-button-tonal-hover-background`	TonalBackground for hovered tonal buttons
`--b-button-type-text-hover-background`	TextBackground for hovered text buttons
Pressed
`--b-button-pressed-box-shadow`	Box-shadow for pressed buttons, overridden by renditions
`--b-button-outlined-pressed-color`	OutlinedText color for pressed outlined buttons
`--b-button-elevated-pressed-background`	ElevatedBackground for pressed elevated buttons
`--b-button-elevated-pressed-hover-background`	ElevatedBackground for hovered pressed elevated buttons
`--b-button-filled-pressed-background`	FilledBackground for pressed filled buttons
`--b-button-filled-pressed-hover-background`	FilledBackground for hovered pressed filled buttons
`--b-button-outlined-pressed-background`	OutlinedBackground for pressed outlined buttons
`--b-button-outlined-pressed-hover-background`	OutlinedBackground for hovered pressed outlined buttons
`--b-button-tonal-pressed-background`	TonalBackground for pressed tonal buttons
`--b-button-tonal-pressed-hover-background`	TonalBackground for hovered pressed tonal buttons
`--b-button-type-text-pressed-background`	TextBackground for pressed text buttons
`--b-button-type-text-pressed-hover-background`	TextBackground for hovered pressed text buttons

Inherited

Widget20

Badge5

Button

Button with menu

Click handling in a complex widget

Configs

Common

Other

Accessibility

CSS

DOM

Float & align

Layout

Misc

Scrolling

Properties

Class hierarchy

Other

Accessibility

CSS

DOM

Float & align

Layout

Lifecycle

Misc

Visibility

Widget hierarchy

Functions

Other

Configuration

Events

Float & align

Lifecycle

Misc

Visibility

Widget hierarchy

Events

Event handlers

Typedefs

CSS variables

Inherited