style
Type: object
Example:
style: {
border: '3d'
}
Sets the intention for certain style properties, allowing to override the current style preset.
These are not CSS properties
To ensure style does not break across multiple components and screen resolutions, these settings define intentions but not raw CSS values. Make sure to see the list of options below.
Style properties
font
Defines the font for text and labels.
style: {
font: 'Roboto'
}
Possible values:
'Roboto'
'Montserrat'
'WorkSans'
'NotoSansHK'
'Lato'
'NunitoSans'
fontWeight
Defines how font weights should be balanced.
style: {
fontWeight: 'bolder'
}
Possible values:
'bolder'
– text will lean towards the bolder side.'minMax'
– text will either be very thin or very bold.
borderRadius
Defines the border radius of tooltips, dialogs and buttons.
style: {
borderRadius: 'none'
}
Possible values:
'none'
– sharp corners.'max'
– very rounded corners.'asymmetrical'
– alternating rounding on opposite corners.
border
Defines the border thickness of tooltips, dialogs and buttons.
style: {
border: '3d'
}
Possible values:
'thick'
– thicker borders, usually about 2px thick.'3d'
– same as'thick'
but with a subtle 3d bevel effect using various shades.
padding
Defines the padding and white space of tooltips, dialogs and buttons.
style: {
padding: 'spacious'
}
Possible values:
'spacious'
– additional spacing and padding, creating a negative space on some dialogs.
buttonFace
Defines how soft buttons (like number steppers) are colored.
style: {
buttonFace: 'fillEnabled'
}
Possible values:
'fillEnabled'
– fills all buttons that are enabled.'fillHighlightedOption'
– only fills the recommended/highlighted option.