Skip to main content


Use buttons for major actions.

Buttons draw more attention than a simple text link. Because of their larger surface and color, they are visually more findable and easier to click or tap.

When to use

Use a button when an action has more weight or significance. Examples:

  • There is a clear primary action people should take
  • Highlighting a suggested action in a page section
  • A significant or destructive action will be applied and users need to be aware

If the action should not be prompted, a text link may be a better option.

Types of buttons

Primary button

This is the most common type of button. Use these to direct people to a clear primary action. To call out that these buttons are actionable, they are action blue #495ED4.

<button class="btn">
Do something

Try not to have more than 1 primary button on a page. Multiple primary buttons puts more cognitive load on people. It takes them more time and effort to figure out what to do.

Inverse button

On some backgrounds, the primary button color will not have sufficient contrast. In this case, use inverse buttons, which have a white fill.

Code editor

Secondary button

Code editor

Secondary buttons don’t have as much visual weight because they are outlined instead of solid. Use these if your button is not an important action on the page.

Pair it side-by-side with a primary button to prompt toward the primary button’s action.

Code editor


Block buttons

Block buttons stretch to fill the width of the screen or area instead of having a set width. They are often used on mobile layouts.

Code editor


Icons can be on the left or right of the text in a button. Do not use more than one icon in a button.

Code editor

Icons should reinforce the meaning of the button’s text. In rare cases, an icon can be used without text. Only do this if the icon is extremely universally understood, such as an arrow or search magnifying glass. Read more about icons


button specs

Buttons have:

  • corner radius of 8px
  • 8px padding on the top and bottom
  • 20px padding left and right, but can be variable on block buttons
  • Body Bold text



Buttons are typically left aligned with other content, not centered. For exceptions, see block buttons.

Be a DreamSF Fellow

The DreamSF Fellowship is a paid leadership and civic engagement program for immigrant youth.

  • Button is left aligned with other content

Be a DreamSF Fellow

The DreamSF Fellowship is a paid leadership and civic engagement program for immigrant youth.

  • Button is centered

Arrangement of multiple buttons

For 2 or more button options, place them side by side instead of on top of one another if possible. This reduces the chance of accidentally clicking the wrong one and avoids alignment issues.

  • Choices are side by side

  • Choices are stacked

Writing button text

Button text should ideally be less than 15 characters. A maximum of 25 characters is OK if necessary.

Refer to the button text library for common button uses.

Long button text is less legible, less impactful, and sometimes can even cause wrapping.

  • Button text is short
  • Button text is very long
  • Button text fits on one line
  • Button text wraps to fit

HTML implementation

Buttons styles can be applied to both HTML links (<a> elements) and interactive buttons (<button>).

Code editor
Code editor

HTML buttons

Code editor

Block button

Code editor