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

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[iOS]Building an app from scratch — SlapJack. Part 1

Do You Never Update Your iPhone? You Could Be About To Lose WhatsApp

Do You Never Update Your iPhone? You Could Be About To Lose WhatsApp

UIKeyCommand — Part 3: macOS Catalyst Menu Items

Multi-User Collaborative iOS AR Experiences with Agora (Part 1 of 2)

Writing a Generic/Reusable Networking Layer using Combine Swift iOS

Connecting to Agora with Tokens — Using Swift

Magic Modifier in SwiftUI (Gestures)

Agora Releases Native SDK v3.2.0

Banner image stating the title

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
Water Lou

Water Lou

More from Medium

How to preview UIViewControllers using SwiftUI

Send data with navigation from View controller to SwiftUI view

SwiftUI: A Better Way To Account For Users Opting For “Reduce Motion”

Calling asynchronous Firebase APIs from Swift