Search code examples
fluent-uioffice-fabricfluentui-react

How to style new @fluentui/react-button [v8 beta]?

Is there any documentation on how to apply style customisations to the new Button? The styling using the IButtonStyles interface is broken on the new button, as per code below.

import { PrimaryButton } from '@fluentui/react';
import { Button as FluentButton } from '@fluentui/react-button';

const btnStyles = {
    rootHovered: {
        background: "red"
    }
};

return (
    <div>
         <PrimaryButton styles={btnStyles}/>
         <FluentButton styles={btnStyles}/>
    </div>
)
Solution

  • Have looked into the file where the new react-button is defined, seems to need a ButtonTokens. Guessing this is along with the wider Fluent UI trend of moving to style tokens.

    const btnStyle : ButtonTokens = { borderColor: 'red' }
return (
   <FluentButton tokens={btnStyle} />
)