Skip to content

SwiftUI: Label

Last updated on June 24, 2020

Recently introduced in WWDC 2020, Label allows you to embed image next to text. Traditionally, you would HStack to create both image and text next to each other. I personally this is a good introduction.

Bear in mind that this only supports iOS 14 and above and can only be used in Xcode 12+.

A standard label for user interface items, consisting of an icon with a title.

Apple Documentation

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 12+
  • Only supports iOS 14+

Label

Label takes title and the name of the asset either your own image or the system. Here you will be using system’s image.

However, if you want to use your own image, it’s just a small tweak.

I honestly wonder if this is a bug as the alignment seems to be a little off or maybe this is just how it should look like? If this is how it should look like, you should opt for the traditional way of using HStack.

Perhaps Apple will release a bug fix? Who knows. Let’s wait and see.

While waiting for Apple to fix that, the work around to this would probably to create your own. Label does offer you you customise further. Next, you will use an image as an icon.

I personally find this look nicer with the image correctly aligned.

You could even opt for a Shape instead of an image.

Where to go From Here

Feel like SwiftUI is something that you will really like and want to explore more? Check out my page where you can learn how to use most of the components in SwiftUI.

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2020.