Scale and spacing

Every Bolio UI component accepts the same props to set its size and spacing: width, padding, margin, font and their shorthands, plus scale to resize the whole component. They are not repeated in the props table of each component, because they work the same everywhere. To add them to a component of your own, read useScale.

How values work

• A number is a multiplier of the base unit, 16px by default. width={10} is 160px.
• A string is used as it is: width="120px", width="100%" or width="auto".
• Each component also has its own default for every property. A Button has 1.15 units of horizontal padding, and a number multiplies that default too, so px={2} on a Button is twice its usual padding.

Numbers and strings

A number multiplies the unit, a string is used as it is.

The scale prop

scale resizes the component with all of its parts, so the padding, the font and the icons follow together. The effect is softened: scale={2} makes a component 1.5 times bigger and scale={0.5} makes it 0.75 times.

Scale

The same Button with four scales.

Padding and margin

Set one side with pt, pr, pb and pl, both sides of an axis with px and py, or all sides with padding. Margin works the same with mt, mr, mb, ml, mx, my and margin. When more than one applies, the most specific wins: a side beats its axis, and an axis beats the general one. With padding={1} and pt={3}, the top is 3 and the other sides are 1.

Attribute	Description	Type	Default
width, w	width	`string \| number`	depends on the component
height, h	height	`string \| number`	depends on the component
padding	padding on all sides	`string \| number`	depends on the component
px, py	horizontal and vertical padding	`string \| number`	depends on the component
pt, pr, pb, pl	padding of one side	`string \| number`	depends on the component
paddingTop, paddingRight	long names of `pt` and `pr`	`string \| number`	depends on the component
paddingBottom, paddingLeft	long names of `pb` and `pl`	`string \| number`	depends on the component
margin	margin on all sides	`string \| number`	depends on the component
mx, my	horizontal and vertical margin	`string \| number`	depends on the component
mt, mr, mb, ml	margin of one side	`string \| number`	depends on the component
marginTop, marginRight	long names of `mt` and `mr`	`string \| number`	depends on the component
marginBottom, marginLeft	long names of `mb` and `ml`	`string \| number`	depends on the component
font	font size	`string \| number`	depends on the component
scale	resizes the whole component	`number`	`1`
unit	base that numbers multiply	`string`	`16px`

Edit this page on GitHub