[We can] use disabled, but __experimentalIsFocusable needs to be specified to make the Button component output aria-disabled instead of the normal disabled attribute and remain focused.
isBusy can be used to show a loading indicator, but it depends on whether that fits the design. Here's some pseudocode:
<Button isBusy={ isCreatingMenu } disabled={ isCreatingMenu } __experimentalIsFocusable>Create menu</Button>edit: Button does also implicitly prevent clicks when configured this way:
|
if ( disabled && isFocusable ) { |
|
// In this case, the button will be disabled, but still focusable and |
|
// perceivable by screen reader users. |
|
tagProps[ 'aria-disabled' ] = true; |
|
|
|
for ( const disabledEvent of disabledEventsOnDisabledButton ) { |
|
additionalProps[ disabledEvent ] = ( event ) => { |
|
event.stopPropagation(); |
|
event.preventDefault(); |
|
}; |
|
} |
|
} |
Originally posted by @talldan in #42987 (comment)
[We can] use
disabled, but__experimentalIsFocusableneeds to be specified to make theButtoncomponent outputaria-disabledinstead of the normaldisabledattribute and remain focused.isBusycan be used to show a loading indicator, but it depends on whether that fits the design. Here's some pseudocode:edit:
Buttondoes also implicitly prevent clicks when configured this way:gutenberg/packages/components/src/button/index.js
Lines 119 to 130 in ec29b9c
Originally posted by @talldan in #42987 (comment)