Strange inner view in SwiftUI buttons on Watch - swiftui

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()

Answer 2

This worked for me
HStack {
Button("Login")
{
}
.buttonStyle(BorderedButtonStyle(tint: .clear))
.foregroundColor(.white)
}
.background(Color.red)
.cornerRadius(5)
if its in a list try this as well
.listRowPlatterColor(Color.clear)

Answer 3

I believe that this is a result of using accentColor to define the colour of you text for the button.
You can substitute this for foregroundColor and achieve the same text colour but hopefully without the odd patterning you are currently experiencing.
With the changes your code would look like:
struct ContentView : View
{
var body: some View
{
VStack
{
Button( "Login")
{
}
.foregroundColor( .white)
.frame( idealHeight:50.0)
.padding( [.leading, .trailing], 10.0)
.background( Color.red)
.cornerRadius( 5.0)
Button( "Sign Up")
{
}
.foregroundColor( .red)
.frame( idealHeight:50.0)
.padding( [.leading, .trailing], 10.0)
.background( Color.white)
.cornerRadius( 5.0)
}
}
}
Unfortunately this doesn't entirely solve the issue.
As you can see we go from this:
to this:
Which is not ideal.

Answer 4

According to this documentation you should set the radius to 22 points (or 9 for scroll view)