Strange inner view in SwiftUI buttons on Watch

Question

I am just starting out with both Watch development and SwiftUI, and thought I would start with a simple Login Screen. I have made two buttons of two different styles. The strange thing is that my buttons have a strange red inner view to them and I am not sure why.

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Button( "Login")
            {            
            }
            .accentColor( .white)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.red)
            .cornerRadius( 5.0)

            Button( "Sign Up")
            {
            }
            .accentColor( .red)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.white)
            .cornerRadius( 5.0)
        }
    }
}

Can someone tell me what is going on here ?

Also if someone has reputation of 1500 can they please create WatchOS6 tag ?

Update: This works way better on the iPhone than the Watch, Buttons seem to work differently on the two devices. As pointed out by @MarkT you need to start out with a button style of plain. The issue with this is that it stops you using your own Button Styles.

Answer 1

You are only defining a background behind a "default" Button that's why it looks so wired.

Changing the button style to "plain" and apply the corner radius to the background will help. Of course you must adjust the background size by using padding to frame ...

       Button( "Login")
            {
            }
            .buttonStyle(PlainButtonStyle())
            .padding(.horizontal, 60)
            .padding(.vertical, 10)
            .background(
                   Color.red
                      .cornerRadius( 5.0))
                

Update: As mentioned from d4Rk we have to use PlainButtonStyle()