# Your First iOS and SwiftUI App · Styling the Buttons and Slider | raywenderlich.com **URL:** \ **Category:** 🎓 Courses & Articles\ **Created:** [September 13, 2019, 9:05am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665 "2019-09-13T09:05:30Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![rwenderlich](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/rwenderlich/32/108604_2.png) [@rwenderlich](https://forums.kodeco.com/u/rwenderlich)\ **Post date:** [September 13, 2019, 9:05am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/1 "2019-09-13T09:05:31Z")
* * * This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/4919757-your-first-ios-and-swiftui-app/lessons/43](https://www.raywenderlich.com/4919757-your-first-ios-and-swiftui-app/lessons/43) ---
**Author:** ![gariyanto](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/gariyanto/32/85754_2.png) [@gariyanto](https://forums.kodeco.com/u/gariyanto)\ **Post date:** [October 9, 2019, 3:45am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/2 "2019-10-09T03:45:34Z")
Hi, I am using XCODE 11.1 and macOS Catalina and I found a bug in the button image background. Instead of rendering the image as the background, it rendered the accent color. ---
**Author:** ![pieter-jan\_delaruell](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/pieter-jan_delaruell/32/81494_2.png) [@pieter-jan\_delaruell](https://forums.kodeco.com/u/pieter-jan_delaruell)\ **Post date:** [October 10, 2019, 12:22pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/3 "2019-10-10T12:22:14Z")
I can confirm, I get the same bug. ---
**Author:** ![humptydumpty](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/humptydumpty/32/81494_2.png) [@humptydumpty](https://forums.kodeco.com/u/humptydumpty)\ **Post date:** [October 13, 2019, 2:17pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/4 "2019-10-13T14:17:45Z")
Same( How i can fix it? ---
**Author:** ![xnooby](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/xnooby/32/102075_2.png) [@xnooby](https://forums.kodeco.com/u/xnooby)\ **Post date:** [October 13, 2019, 2:20pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/5 "2019-10-13T14:20:09Z")
Is there a fix or workaround? When I set the button’s image background, I just see the a blue button. Adding the shadow modifier allows the text to bleed through. The Inspector also stops working. Back to the UIKit tutorial I guess. ---
**Author:** ![xiongxin](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/xiongxin/32/81494_2.png) [@xiongxin](https://forums.kodeco.com/u/xiongxin)\ **Post date:** [October 13, 2019, 3:54pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/6 "2019-10-13T15:54:22Z")
@gariyanto I have the same problem with you. And I find that I can’t override the style, so the text in button still has shadow style. The text shadow is inherited from button style, and I can not override this style. I am very confusing ---
**Author:** ![mikeylogs](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mikeylogs/32/81494_2.png) [@mikeylogs](https://forums.kodeco.com/u/mikeylogs)\ **Post date:** [October 15, 2019, 12:50am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/7 "2019-10-15T00:50:28Z")
Getting the same. Anything in docs? ---
**Author:** ![pieperz](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/pieperz/32/81494_2.png) [@pieperz](https://forums.kodeco.com/u/pieperz)\ **Post date:** [October 15, 2019, 4:10pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/9 "2019-10-15T16:10:31Z")
Image(“InfoIcon”).accentColor(midnightBlue) Text(“Info”).modifier(ButtonSmallTextStyle()) I’ve done it like this and everything works ---
**Author:** ![speaker007](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/speaker007/32/109158_2.png) [@speaker007](https://forums.kodeco.com/u/speaker007)\ **Post date:** [October 15, 2019, 5:13pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/10 "2019-10-15T17:13:49Z")
Solution: .background(Image(“Button”).renderingMode(.original)) ---
**Author:** ![ekramy](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ekramy/32/86956_2.png) [@ekramy](https://forums.kodeco.com/u/ekramy)\ **Post date:** [October 20, 2019, 6:37pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/12 "2019-10-20T18:37:08Z")
I found the solution Go to Assets.xcassets then choose → Button Then choose image set → render As choose Orginal Image ![solution](https://files.chunter.kodeco.com/original/3X/2/e/2e170d3cdc29c98ada90f785708c254813ecc515.jpeg) ---
**Author:** ![markzism](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/markzism/32/86133_2.png) [@markzism](https://forums.kodeco.com/u/markzism)\ **Post date:** [October 25, 2019, 5:49am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/13 "2019-10-25T05:49:01Z")
This was the solution! thanks. ---
**Author:** ![jcupak](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jcupak/32/81494_2.png) [@jcupak](https://forums.kodeco.com/u/jcupak)\ **Post date:** [October 25, 2019, 1:59pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/14 "2019-10-25T13:59:05Z")
After creating the buttons, I found that adding `**.background(Image("Button"))**` displays the button in blue. The fix is to use ` **.background(Image("Button").renderingMode(.original))**` to render the background image as original, not as the blue accent color. ---
**Author:** ![rwenderlich](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/rwenderlich/32/108604_2.png) [@rwenderlich](https://forums.kodeco.com/u/rwenderlich)\ **Post date:** [October 30, 2019, 3:56pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/15 "2019-10-30T15:56:28Z")
Hi all! I have confirmed the issue you guys are seeing in Xcode 11.1. Both of the workarounds you guys mentioned work: 1. In **Assets.xcassets** , select **Button** and change the **Render As** to **Original Image**. 2. Or you can do it via code by setting the rendering mode on the image in each button, like `background(Image("Button").renderingMode(.original))` Personally I think option #1 is a bit simpler as it’s less code, but either one works. I’ve updated the author notes on the video with a note on this for anyone else who comes across this. ---
**Author:** ![carl.usa](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/carl.usa/32/81494_2.png) [@carl.usa](https://forums.kodeco.com/u/carl.usa)\ **Post date:** [November 19, 2019, 11:47pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/16 "2019-11-19T23:47:10Z")
Just after the 1 minute mark, Ray runs the app in the simulator to show that the buttons are not actually cut off. This is true for iPhone X but not true for iPhone’s without the notch. I tried for iPhone 8 simulator and iPhone 7 Plus, actual device, and the buttons are cut off. Any suggestions on how to fix on these older phones? ---
**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\ **Post date:** [January 11, 2020, 9:31pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/17 "2020-01-11T21:31:08Z")
@carl.usa Do you still have issues with this? ---
**Author:** ![t11s](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/t11s/32/88562_2.png) [@t11s](https://forums.kodeco.com/u/t11s)\ **Post date:** [February 25, 2020, 2:59am UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/19 "2020-02-25T02:59:01Z")
@rwenderlich It appears that the buttons in the hstack are align by their text in the hstack, making button spacing uneven. How should we fix this? ---
**Author:** ![shrutisharma](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shrutisharma/32/81494_2.png) [@shrutisharma](https://forums.kodeco.com/u/shrutisharma)\ **Post date:** [July 8, 2020, 10:02pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/20 "2020-07-08T22:02:39Z")
I have the same question as @carl.usa. How should we fix the view going out of screen width in devices without notches? ---
**Author:** ![garciaraul123](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/garciaraul123/32/81494_2.png) [@garciaraul123](https://forums.kodeco.com/u/garciaraul123)\ **Post date:** [September 1, 2020, 2:03pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/21 "2020-09-01T14:03:59Z")
I ran the original code in xCode12 and the color of the button icons doesn’t change, even if I put the color directly over the image, it doesn’t change. If I do Image(“StartOverIcon”) .renderingMode(.template) .foregroundColor(.white) It changes to white but it doesn’t work with the custom color. Any idea on how to fix it? ---
**Author:** ![carodejpes](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/carodejpes/32/81494_2.png) [@carodejpes](https://forums.kodeco.com/u/carodejpes)\ **Post date:** [November 16, 2020, 6:30pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/22 "2020-11-16T18:30:10Z")
same problem here… any solution? ---
**Author:** ![zelaur](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/zelaur/32/93986_2.png) [@zelaur](https://forums.kodeco.com/u/zelaur)\ **Post date:** [December 12, 2020, 9:17pm UTC](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665/23 "2020-12-12T21:17:48Z")
Go to Assetx.xcassets and change the “Render as” to template, this solves it 🙂 [Next page](https://forums.kodeco.com/t/your-first-ios-and-swiftui-app-styling-the-buttons-and-slider-raywenderlich-com/81665.md?page=2)