Text

Text can be created in a variety of ways, but the most common is putting a string into a Text element.

Text(markdown: """
Although you *can* use elements such as `Strong` and `Italic` to style your text, it's easier to use Markdown. To do that, use `Text(markdown:)` then write your Markdown as normal.
""")

Although you can use elements such as Strong and Italic to style your text, it’s easier to use Markdown. To do that, use Text(markdown:) then write your Markdown as normal.

It’s common to place other elements inside text, to gain access to alignment and more. For example, icons, badges, and images are all commonly used inside text.

Text {
    "To do that, pass items into the text using a trailing closure. "

    Strong {
        "Using this approach you can add styling all you want, just by building up elements. "

        Emphasis {
            "Although Markdown is still easier, to be honest! "
        }
    }

    "Here's an image right inside our text:"

    Image("/images/photos/washing.jpg", description: "A laundry basket.")
        .resizable()
        .frame(maxWidth: 250)
}

To do that, pass items into the text using a trailing closure. Using this approach you can add styling all you want, just by building up elements. Although Markdown is still easier, to be honest! Here's an image right inside our text: A laundry basket.

Styling your text

You can adjust the weight of text using the fontWeight() modifier, like this:

Text("Hello, world!")
    .font(.title3)
    .fontWeight(.black)

Hello, world!

There are a variety of available weights available, from .black down to .ultraThin:

Text("Hello, world: Black")
    .font(.title3)
    .fontWeight(.black)

Text("Hello, world: Heavy")
    .font(.title3)
    .fontWeight(.heavy)

Text("Hello, world: Bold")
    .font(.title3)
    .fontWeight(.bold)

Text("Hello, world: Semibold")
    .font(.title3)
    .fontWeight(.semibold)

Text("Hello, world: Medium")
    .font(.title3)
    .fontWeight(.medium)

Text("Hello, world: Regular")
    .font(.title3)
    .fontWeight(.regular)

Text("Hello, world: Light")
    .font(.title3)
    .fontWeight(.light)

Text("Hello, world: Thin")
    .font(.title3)
    .fontWeight(.thin)

Text("Hello, world: Ultra Light")
    .font(.title3)
    .fontWeight(.ultraLight)

Hello, world: Black

Hello, world: Heavy

Hello, world: Bold

Hello, world: Semibold

Hello, world: Medium

Hello, world: Regular

Hello, world: Light

Hello, world: Thin

Hello, world: Ultra Light

Use the horizontalAlignment() modifier to adjust how your text is aligned:

Text("This is left-aligned text.")
    .horizontalAlignment(.leading)

Text("This is center-aligned text.")
    .horizontalAlignment(.center)

Text("This is right-aligned text.")
    .horizontalAlignment(.trailing)

This is left-aligned text.

This is center-aligned text.

This is right-aligned text.

Change your text’s color using the foregroundStyle() modifier. This can be one of the standard roles, e.g. .danger, or can be a regular color.

Text("This is dangerous text.")
    .foregroundStyle(.danger)

Text("This is steel blue text.")
    .foregroundStyle(.steelBlue)

This is dangerous text.

This is steel blue text.

Limit the number of lines your text displays using the lineLimit() modifier:

Text(placeholderLength: 200)
    .lineLimit(2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. aliqua voluptate exercitation, reprehenderit ex laborum commodo dolor. Occaecat nisi. Duis dolor nulla aliqua esse voluptate eiusmod et cillum et consequat quis dolor sunt, ut eu. Nulla labore ullamco cupidatat minim sint irure minim dolor, ut mollit esse cupidatat commodo labore aute et excepteur in dolor. Deserunt aliquip, dolore deserunt, culpa, pariatur sint, incididunt velit cupidatat ex nostrud cillum sunt, nisi. Irure culpa consequat quis ut ut exercitation do, tempor dolore sed cupidatat quis. Veniam cillum exercitation. Labore sed cupidatat dolor id nisi ea cillum officia culpa exercitation labore. Incididunt, qui officia, et. Excepteur cupidatat, duis minim. Magna quis, deserunt, ad non culpa dolore est est est dolore dolor ut enim anim. Eu ex cupidatat quis reprehenderit cupidatat do officia ut, veniam aute minim laboris ut tempor excepteur ex ad ullamco labore. Nulla ullamco anim, voluptate enim nulla laborum nostrud laboris nisi aute qui id, anim occaecat aute aliqua quis ea aliquip eiusmod laboris qui consequat, tempor cupidatat exercitation non exercitation. Dolore. Commodo veniam magna occaecat, veniam eiusmod nostrud in ut laborum nulla dolore sed in. Veniam nisi minim. Reprehenderit reprehenderit dolor, sed, magna commodo aliqua laboris cillum cillum voluptate ut dolore.