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?
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).
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.