Button
Only use a button if there is a specific action you want someone to take.
A button is a clickable area on a webpage, styled to look like a physical button.
Content types that support buttons
You can add a button as part of a call to action on this content type:
Transaction
You can add a button as a link to a signup platform or online session on these content types:
Event
Meeting
You can add a button as part of a Spotlight on these content types:
Agency
Campaign
Report
Add a button
Button link will display as an option in sections that can have a button. Here is a Transaction "What to do" section with a button link option:
The Button component will appear when you select it.
Fill out the fields:
Choose SF.gov or external link
For an SF.gov page, choose the page
For an external link, paste in the url
Link text will display on the button
Screenreader label will not display, but will be read out loud by screenreaders. For this field, describe the action the user is about to take (For example, "go to the form")
One button per page
We recommend no more than one button on a page.
Multiple buttons can be distracting
If you have more than one action, use a button for the top action you want users to take
Add the others as links
Button text
Buttons can only be 25 characters long. Shorter button text is more effective!
Here are some commonly used button words that are short and effective. Notice that almost all of them start with a verb!
General
Button text
When
Apply...
Going to a form where they send in their info and a department dictates whether they’ll get something or not.
Order...
For direct transactions where anyone is entitled to the item, although it often costs money. (For example, birth certificates.)
Find...
Encouraging the seeker to self-serve a piece of information.
Going to an application form
Button text
When
Apply now
Generic text when using a button that goes to an online form.
Apply online
When the application is not usually done online. This text the applicant to expect something different than what they’re used to.
Apply by Jan 31
When there’s a hard deadline. Use the shorted version of the month and omit the year.
Interacting with files
Button text
When
Download PDF
The primary action of a page is to use or refer to the PDF.
See map
The primary action of a page is to use the map.
Going to a page outside of SF.gov
Button text
When
Learn more
Generic text when the destination is informational.
Form actions
Button text
When
Get started
On the intro page, to start the form.
Previous / Next
Between form pages.
Submit
On the last page of the form. Once someone clicks “Submit” then it’s sent to the department.
Last updated