Spacings

Page Summary

Specifications references

Usage

The spacing scale increases in small increments needed to describe both internal and external spacing relationships. Spacing tokens can be applied as padding and margins.

Apply spacing for magin

Apply the spacing to get magin arround element like this:

// Add a padding of 16px arround the text in the button

Button {
    // Add your action here
} label: {
    Text("ButtonText")
    .padding(.all, ODSSpacing.m)
}


// Add a magin of 16px (leading and trailing)
VStack {
    Text("Title")
    Text("A very long text for description in the main view")
}
.padding(.horizontal: ODSSpacing.m) // Add a margin to the

Apply spacing for padding

Apply the spacing to separate elements like this:

HStack(spacing: ODSSpacing.m) {
    Image(systemname: "heart")
    Text("Some text")
}