title: SwiftUI - Align contents of Button to the left
body: <p>I have a design that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WKwWo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WKwWo.png" alt="enter image description here"></a></p>
  
  <p>When I wrap it in a Button, the Image and "HOME" text move toward the center: </p>
  
  <p><a href="https://i.stack.imgur.com/sEHQx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sEHQx.png" alt="enter image description here"></a></p>
  
  <p>I am trying to keep the contents aligned to the left but I'm having trouble. Here's the code that makes up this component.</p>
  
  <pre><code>struct HomeSection: View {
  var body: some View {
      Button(action: {
  
      }) {
          Group {
              Spacer().frame(width: 0, height: 36.0, alignment: .topLeading)
              HStack {
                  Image("home")
                      .resizable()
                      .frame(width: 24, height: 24)
                      .foregroundColor(.navigationTextGrey)
  
                  Text("HOME")
                      .bold()
                      .font(.system(size: 17.0))
                      .foregroundColor(Color.navigationTextGrey)
                      .padding(.leading, 4.0)
              }
              Rectangle()
                  .fill(Color.navigationTextGrey)
                  .frame(width: UIScreen.main.bounds.width - 60, height: 1)
                  .padding(.top, 6.0)
          }
      }
  }
  }
  </code></pre>