Buttons give people a way to trigger an action. They're typically found in windows, alerts, and dialogs. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. The Fluent UI button for macOS adds system-appropriate hover effects when the mouse rests over it.

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

### Primary filled

<img className="off" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryfilled_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryfilled_dark.png?text=DarkMode" />

### Primary outlined

<img className="off" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryoutlined_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryoutlined_dark.png?text=DarkMode" />

### Borderless

<img className="off" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryborderless_light.png?text=LightMode" />
<img className="on" src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20200701.001/fabric-website/images/controls/macos/Button/button_primaryborderless_dark.png?text=DarkMode" />

</DisplayToggle>