Add Action Buttons

What You’ll Do

Add some placeholder action buttons to the page header

Step 1: Add Action Buttons

Again we will modify the Page Header component. Add the following code between the comments:

<!-- ACTION BUTTONS -->
<div class="slds-col slds-no-flex slds-grid slds-align-top">
  <div class="slds-button-group" role="group">
    <button class="slds-button slds-button_neutral"> Add Contact </button>
    <button class="slds-button slds-button_neutral"> More </button>
  </div>
</div>
<!-- / ACTION BUTTONS -->

These buttons don’t do anything when clicked, but you can easily add that functionality later.

Step 2: Preview

Save your page, and click the Preview button.

Resources

The Design System site has more documentation and examples.

Button Groups