2

How to create a "danger" (red) button in the Microsoft fluentui library? Like one have in other ui frameworks like bootstrap etc.

There are <DefaultButton> and <PrimaryButton> but I have not found anything like <DangerButton>?

Alternatively, how do you specify the style in such a way so that button uses the "danger" color specified by the theme?

Nikolay
  • 10,752
  • 2
  • 23
  • 51

2 Answers2

2

You can change the button style from the following DefaultButton Component properties: Style, Styles, Class Name, Theme.

Property style of DefaultButton Component:

<DefaultButton style={{ backgroundColor: '#f00' }} />

Property styles of DefaultButton Component:

<DefaultButton
  styles={{
    root: {
      backgroundColor: '#f00',
      color: '#fff',
    }        
  }}
/>

Property className of DefaultButton Component:

// CSS 
.btn-danger { background-color: #f00; }

// Component
<DefaultButton className="btn-danger" />

Property theme of DefaultButton Component:

import { createTheme, DefaultButton, ITheme } from 'office-ui-fabric-react'

...

const dangerButtonTheme: ITheme = createTheme({
  palette: {
    white: '#f00',
    neutralPrimary: '#fff',
  },
})

<DefaultButton theme={dangerButtonTheme} />

Codepen working example

Useful links:

MartinT
  • 590
  • 5
  • 21
Marko Savic
  • 2,159
  • 2
  • 14
  • 27
  • Sorry I did not mention properly I guess, I want to use existing theme (I'm creating a SharePoint extension, so all colors are already sort of predefined by the SharePoint theme). I don't want to overwrite them or create my custom color theme. – Nikolay Oct 25 '20 at 01:19
  • I'm trying to understand, you want to apply a color from existing theme to Button component right? https://github.com/callstack/react-theme-provider/blob/master/README.md#usage – Marko Savic Oct 25 '20 at 09:20
  • I'm building SPFx SharePoint extension using the fluentui library. And wuold like to add a "danger" button that would have the same style SharePoint does basically. Please note that the theme colors are selected by SharePoint, not by me. – Nikolay Oct 25 '20 at 14:38
  • Please note that some FluentUI components accept function as a parameter for "styles". But the "Button" requires a constant, not a function as a value for "styles" – Nikolay Oct 25 '20 at 14:43
1

There is no "danger" button type in fluent ui, you will have to style it yourself.

See here an example (you also can basically just add a className to the button and style it however you like).

igorc
  • 2,024
  • 2
  • 17
  • 29
  • This is what I suspected... How do I use theme color to style the button as "danger"? The styles prop for a button is not a function but a constant. Am I supposed to hardcode the colors? – Nikolay Oct 10 '20 at 14:53