Buttons are one of the core controls that make an app feel native to the platform it's on. It’s important to respect the platform's paradigms in order to help the user feel at home on iOS and keep the experience quality high.

<DisplayToggle onText="Dark" offText="Light" label="Theme Switcher">

### Primary Filled

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_01_primaryfilled_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_01_primaryfilled_dark.png?text=DarkMode" />

### Primary Outlined

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_02_primaryoutlined_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_02_primaryoutlined_dark.png?text=DarkMode" />

### Secondary Outlined

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_03_secondaryoutlined_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_03_secondaryoutlined_dark.png?text=DarkMode" />

### Tertiary Outlined

<img className="off" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_04_tertiaryoutlined_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/controls/ios/updated/img_button_04_tertiaryoutlined_dark.png?text=DarkMode" />

</DisplayToggle>