How to create a "danger" button in fluentui (office ui fabric)?

Question

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?

Answer 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).

Answer 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:

• Component Styling
• Base Button styles definition
• Theme Designer