Buttons — HIG Playground

Experience 4 button styles and 3 sizes interactively. Change properties in the control panel and see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

Buttons

Primary Action

Actions

Destructive

Compact

Disabled

⚠️ HIG Violation: This pattern is not recommended

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Filled style for the primary action
Use short verb phrases as labels ("Save", "Continue")
Limit button text to one or two words
Use styles matching hierarchy (Filled → Tinted → Plain)
Use system-provided button styles

✗ Don't Do This

❌ Don't place multiple Filled buttons side by side
❌ Avoid overly long button labels
❌ Don't use destructive style for non-destructive actions
❌ Don't give all buttons the same emphasis level

👆 See the bad pattern in the iPhone preview above

iOS provides four button styles: Filled (borderedProminent) for primary actions, Tinted (bordered with tint) for secondary actions, Bordered for tertiary actions, and Plain (borderless) for minimal emphasis.

Apple HIG: Buttons →

⚙️ Controls

Style

Filled

Tinted

Bordered

Plain

Size

Small

Regular

Large

Tint Color

Show Disabled State

Destructive Mode

SwiftUI Code

Button("Continue") { // action } .buttonStyle(.borderedProminent) .controlSize(.regular)