Buttons
Buttons are clickable or tapable elements that are used to initiate an action. Button labels, or “calls-to-action” dictate what action will occur when the user interacts with it, so it is important to always write clear, concise copy that informs the user of what’s to be expected.
We use three types of buttons across our BlackRock digital experiences: primary, secondary, and tertiary. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons; i.e. tertiary buttons.
NOTE: All of our buttons are embedded in our components, and automatically pull in the correct color/style based on the component background color choice.
Button types
Primary
Use primary buttons for the main call to action (CTA) on a page. Minimize the number used per page for maximum impact (we recommend one use per page).
For all of our digital marketing .com experiences, we use the “Primary with icon” button. See our “Button styling” section for a full list of iconography and rules.
Generally, the button without icon is used for tool / application pages when you’re not driving the user to another page; i.e. an end to a process like “Save”, “Accept”, “Submit”.
Secondary
Use secondary buttons for secondary actions on a page. They should only be used in conjunction with our primary buttons or when they aren’t the primary focus of the page.
Tertiary
Use tertiary buttons for less prominent actions. This button can be used in isolation or paired with a primary button. As a rule of thumb, use these after you have introduced a primary button CTA on the page. There is no “secondary” style for tertiary buttons.
Disabled
Use disabled buttons for actions that require the user to perform a function before they can proceed; i.e. a user needs to download a locked pdf, but has not logged in yet, or a form is missing a mandatory field completion, therefore the user should not be able to move to the next step or “Submit” the form.
Alignment & placement hierarchy
Our web experiences should contain a single primary button so that it is clear that it has the highest importance in the page hierarchy. This primary button is always left-aligned to our content blocks. We recommend continuing the page journey with our “tertiary” buttons, as they are our lower emphasis option.
Alignment
Alignment refers to whether the buttons are aligned to the right or the left of a window, container, or page layout. There tends to be many different content or layout needs, so this alignment has a very flexible rule around placement depending on the experience being designed (read Alignment exceptions below).
At BlackRock, our web components have different content layout options (i.e. text block left or right), but our buttons always align to the left side of that content block. This is especially true for our Paragraph component where this provides scannability and accessibility optimization for people who use screen magnification. When the browser window is large and the user is scrolling to read, it’s best to have the primary button where the user’s attention has been focused all along.
Alignment exceptions
Across tools/applications/wizards, where a user is progressing through a series of steps or dialog windows, the primary action traditionally sits at the bottom right. Buttons within components such as notifications, search fields, and tables (i.e. pagination) are also right-aligned.
Placement hierarchy
When placing two buttons together, always place the primary CTA (the most important action) on the left as described above. The secondary/tertiary CTA (the alternative action) is always to the right of the primary button. These button groups are still left aligned within the component.
A secondary CTA signifies a less immediate priority to the user’s task. For example, on an “Edit profile” page, it makes more sense for the user to see the “Save” button (the primary CTA) before the “Cancel” button (the secondary CTA).
This guidance relates to all of our digital marketing experiences. The CTA order reflects the priority we believe the user will have when choosing an action, and backed up by best-in-class design system guidance.
Writing for buttons
The purpose of buttons are to encourage the user to take action or continue through a journey. Writing copy is crucial to aiding them along this journey, so you should always be concise to what is to be expected when they click or tap, and avoid generic and non-specific language like “Learn more”.
As a rule of thumb, describe what action is about to happen, like “Download the PDF”, or “View sustainable strategies”. This copy is concise, and also accessibility compliant. Try not to write a full sentence.
Capitalization:
Buttons should always be written in Sentence case to maintain brand compatibility, and never all caps or initial caps.
Character counts:
We recommend keeping CTA copy under 20 characters, but there is no hard-coded limit.
