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 <!-- ACTION BUTTONS -->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.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • 1 in 4 land a new job
  • 50% receive a promotion or raise
  • 80% learn new technologies that boost their resume
  • 66% say it increases productivity
Source: Trailblazer Community Impact Survey 2019