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.
Button color variations
We currently have 3 primary button colors: BLK_Black, BLK_White, and BLK_Orange, which is labeled “Primary Pop” in our CMS. The color options are automatically paired to the component color background choice; i.e. if you chose BLK_Orange for <xx> component background, “Button Primary Core” will automatically be selected, which in this example is our black button. The icon color is also automatically updated per button/background choice.
Color background matrix & interaction states
As stated above, only certain primary button colors are available per page/component background choice.
- BLK_Black background: Only BLK_White or BLK_Orange primary button available
- BLK_White or BLK_Neutral 1 background: Only BLK_Black or BLK_Orange primary button available
- BLK_Orange, BLK_Yellow, or BLK_Pink background: Only BLK_Black primary button available
- Secondary buttons automatically set
Button iconography
Icons should be used as a visual aid, and therefore show what action is about to be triggered when they user clicks or taps the button. We have a limited set of FontAwesome functional icons pre-baked in to all of our button appearances via the DCR, which is available across all brand appearances.
These icons include:
Default icon/General: fa-angle-right (pro - solid)
CTA example: “Explore more funds”
Download: fa-arrow-to-bottom (pro - regular)
CTA example: “Download PDF”
Video: fa-play-circle (pro - solid)
CTA example: “Watch video”
Webinar: fa-camcorder (pro - regular)
CTA example: “Watch webinar”
Podcast: fa-podcast (pro - regular
CTA example: “Listen now”
Lock: fa-lock (pro - solid)
CTA example: “Sign in to access”
Calendar/Event: fa-calendar (pro - solid)
CTA example: “Register now”
Subscribe: fa-envelope-open-text (pro - solid)
CTA example: “Subscribe to our newsletter”
Email: fa-email (pro - solid)
CTA example: “Email advisor”
When to use an icon
General specs
Our primary and secondary buttons are a fixed height (48px) which follows our 8dp spacing scale. The optional icons are automatically scaled to align to the CTA text baseline. Our tertiary buttons are bound in a 32px container. They do not resize per breakpoint.
Primary + secondary / tertiary spacing
Alternate button size recommendations
For future needs where a smaller button size is needed (i.e. tools/applications/etc.), we recommend the below sizing scale. This is just a recommendation which may be updated as-needed, and has not been implemented. Please check in with us for any other size requirements to ensure consistency.
Interactive specs
Motion: All of our buttons have the same hover state animations, which are automatically applied throughout our component system. We do not suppress the animations on tablet or mobile.
Hover specs: On hover: 3px line animates in from left to right. Animation line color is dependant on button selection and background color.
display: block;
transition: width .3s;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
position: absolute
Accessibility
With everything we design and build here at BlackRock, accessibility is a priority. Buttons are extremely important to be accessible compliant, as they drive users along a journey, and dictate where a page is going to take them.
We have implemented the following in to our buttons:
- Focused states – Default browser implementation — we have not customized it
- Tabbing
- Aria label – Aria-label is a mandatory field in DCR and publishers should fill that in for all CTAs before saving any DCR