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?
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:
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).