How to not leave button in selected state after click - fluent-ui (office ui fabric)

Question

Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.

Alternatively, is there any styling that needs to be done for selection?

Answer 1

You can use DefaultButton checked property for that scenario and control it with onClick event:

const [isButtonChecked, setIsButtonChecked] = React.useState(false);

<DefaultButton
  checked={isButtonChecked}
  onClick={() => {
    setIsButtonChecked(!isButtonChecked);
  }}
  styles={{
    rootChecked: {
      backgroundColor: '#f00',
      color: '#fff',
    }
  }}
>
  Default Button
</DefaultButton>

Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.

Codepen example.