Material Design Button in SwiftUI

  • set minHeight to 44.0
  • add a padding in leading and trailing
  • add a background that fill a round rectangle. Although a round corner can be done by cornerRadius modifier, it will clip the view and so cannot add shadow to button. That’s why I draw the background with round rectangle, and add a shadow on it that will vary by the isPressed status.
  • add another circle shape background that add button press animation
  • add an overlay to draw the stroke of the round rectangle
Button("Primary") {}.buttonStyle(MaterialButtonStyle())
Button("Danger") {}.buttonStyle(MaterialButtonStyle(color: .danger))
Button("Border Danger") {}.buttonStyle(MaterialButtonStyle(color: .danger, maxWidth: true))

Source Code

The full source code can be downloaded here:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store