SwiftUI Academy · Leçon

Mettre les boutons en forme

Appliquez les styles de boutons intégrés et des apparences personnalisées.

Mettre les boutons en forme est une leçon SwiftUI Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage SwiftUI Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours SwiftUI Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Default Looks Are Fine

SwiftUI gives every button a sensible default style for the platform. But you can reshape its look in seconds with a single modifier. 🎨

The buttonStyle Modifier

Apply a built-in look with the buttonStyle modifier. It changes the whole appearance without you touching the label or action.

Button("Save") { save() }
    .buttonStyle(.bordered)

Bordered for Soft Buttons

The .bordered style draws a soft, tinted capsule around your label. It is great for secondary actions that should look calm.

Button("Cancel") { dismiss() }
    .buttonStyle(.bordered)

Prominent for the Main Action

Use .borderedProminent to make the primary action pop with a filled background. Reserve it for the one button that matters most.

Button("Continue") { next() }
    .buttonStyle(.borderedProminent)

Tinting a Button

Set the accent color of a styled button with the tint modifier. It changes the fill or border to match your brand.

Button("Delete") { remove() }
    .buttonStyle(.borderedProminent)
    .tint(.red)

Controlling Size

The controlSize modifier scales a button between mini, small, regular, and large, so it fits the importance of the action.

Button("Go") { go() }
    .buttonStyle(.bordered)
    .controlSize(.large)

Rounding the Corners

Want a different shape? Pair a style with buttonBorderShape to switch between capsule, rounded rectangle, and more.

Button("Join") { join() }
    .buttonStyle(.bordered)
    .buttonBorderShape(.capsule)

Styling the Label Yourself

For full control, style the label view directly with padding, background, and color, just like any other SwiftUI view.

Button("Buy") { buy() }
    .padding()
    .background(.blue)
    .foregroundStyle(.white)

Order of Modifiers

Modifier order matters. Padding before background gives roomy color; background before padding leaves an outer margin instead.

Plain and Borderless

For a text-only look with no chrome, reach for the .plain style. It strips decoration so only your label shows.

Button("Skip") { skip() }
    .buttonStyle(.plain)

Keep It Consistent

Pick a few styles and reuse them across your app. Consistency helps people instantly know what is tappable and what is primary.

Quick Check

Time to test your styling instincts.

Recap

Great job! Use buttonStyle for built-in looks, tint and controlSize to refine them, or style the label directly for full control. 🎨

Questions Fréquemment Posées

La leçon « Mettre les boutons en forme » est-elle gratuite ?

Oui — le texte complet de « Mettre les boutons en forme » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours SwiftUI Academy, passe à CoddyKit PRO. Le cours SwiftUI Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mettre les boutons en forme » ?

Appliquez les styles de boutons intégrés et des apparences personnalisées. Tu pratiques SwiftUI Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer SwiftUI Academy ?

Aucune expérience préalable n'est requise. SwiftUI Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Mettre les boutons en forme » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon SwiftUI Academy ?

Oui. Chaque leçon SwiftUI Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à SwiftUI Academy