Buttons

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
⚠️ 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
Filled
Tinted
Bordered
Plain
Small
Regular
Large
Show Disabled State
Destructive Mode
SwiftUI Code
Button("Continue") { // action } .buttonStyle(.borderedProminent) .controlSize(.regular)