Spacing
Spacing properties ensure unified spacing throughout components.
Alignment Values
All components align to an 8px square baseline grid for mobile, tablet, and desktop.
To enable adherence to this grid, most direct content and layout containing components make the following props available: margin and padding
Note: Rendering the style for margin and padding props requires the inclusion of CssBaseline, which should be placed at the root of your app as a child of <UnifiThemeProvider> (see the styling docs).
For both margin and padding, the numbers 0-8 may be used to apply spacing of (8 * [your chosen value]), eg: margin={2} would apply 8 * 2 = 16 px of margin around the object.
margin is allowed the additional value of 'auto'
Direction Variances
Values can be applied in the following variances:
- Entire box, eg.
margin={2} - Single side, eg.
margin={{ top: 2 }} - Vertical, eg:
padding={{ y: 2 }} - Horizontal,
eg: padding={{ x: 2 }}
Combining Values
Both margin and padding can be used on a component, with a few exceptions.
Within either, multiple "sides" can be defined, such as margin={{ top: 2, right: 3 }} or padding={{ y: 2, right: 2 }
Applicable Components
The following components have margin and/or padding available in this way.
* = margin only
- AppBar
- Badge
- Button*
- ButtonBase
- Card
- CardContent
- Chip*
- CircularProgress*
- Divider*
- ExpansionPanel*
- FormGroup
- FormLabel
- Grid
- Icon*
- IconButton*
- LinearProgress*
- Link
- List*
- Notification
- Panel
- RadioGroup
- Stepper
- SvgIcon
- Typography
Alternate Values
The following components use alternate values such as "dense," "normal," "regular," "default," and "none" to affect uniform spacing of the component unit.
View associated demo to see applicable prop values
- FilledInput
- FormControl
- FormHelperText
- Input
- InputBase
- InputLabel
- OutlinedInput
- Table
- TableCell
- TextField
- Toolbar