Skip to main content

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.


The Design System site has more documentation and examples.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities