gap
The recommended gap between items inside a xlarge container, like progress and loading.
padding
We uses this spacing as the default padding for large containers like modals.
Large container
gap
The recommended gap between items inside a large container, like a modal.
padding
The default horizontal padding of a medium-sized container, like a card.
Medium container
gap
The recommended medium gap between items inside a container, like the gap between elements inisde a modal.
padding
The default horizontal padding of a medium-sized container, like an alert.
Small container
gap
The recommended medium gap between items inside a container, like the gap between elements inisde an alert.
padding
The default padding of a small-sized container, like a tooltip.
gap
The recommended gap between items inside a container, like the gap between elements inisde a card.
padding
The default padding of a extra small-sized container, like the container of an eyebrow title.
gap
The recommended xsmall gap between items inside a container, like the gap between elements inside a tag.
padding
The default padding of a our smallest containers, like the container of an tag.
gap
The recommended gap between the content inside of a xlarge-sized interactive component.
padding
The recommended horizontal padding for xlarge-sized components.
Large Interactive elements
gap
The recommended gap between the content inside of a medium-sized interactive component.
padding
The recommended horizontal padding for large-sized components.
Medium Interactive elements
gap
The recommended gap between the content inside of a medium-sized interactive component.
padding
The recommended horizontal padding for medium-sized components.
Small Interactive elements
gap
The recommended gap between the content inside of a small-sized interactive component.
padding
The recommended horizontal padding for small-sized horizontal components.
padding
The recommended padding for extra-small-sized interactive components.
These are the spacing units we use in every form field we have
gap
The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text.
padding
The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text.
Medium Text-Based input elements
padding
The recommended horizontal padding for text inputs.
Small Text-Based input elements
padding
The default vertical padding for inputs inside a form control.
gap
The default gap for between elements inside a form group, like checkboxes, radio buttons.
padding
The default padding for between elements inside a form group, like checkboxes, radio buttons.
Learn more about
grouped inputs here!
gap
The recommended gap between groped inputs, like the sapce inbetween checkboxes or radio buttons.
Large divider elements
Medium divider elements
Small divider elements