Button

Types

Primary is filled. Use one per context, for the action you most want taken. Secondary is outlined, for page actions. Tertiary has no border or fill until hovered, for low-emphasis actions such as a back link.

Primary Secondary Tertiary

View HTML

<a class="button type-button button--primary" href="#">
  <span class="button__label">Primary</span>
</a>
<a class="button type-button button--secondary" href="#">
  <span class="button__label">Secondary</span>
</a>
<a class="button type-button button--tertiary" href="#">
  <span class="button__label">Tertiary</span>
</a>

Primary, secondary and tertiary buttons

With an icon

Icons are 20px, from the Material Icons library (Outlined), with an 8px gap to the label. An icon-only button is 48 by 48 and needs an aria-label.

Leading Trailing

View HTML

<a class="button type-button button--secondary button--icon-leading" href="#">
  <!-- icon: arrow_back -->
  <span class="button__label">Leading</span>
</a>
<a class="button type-button button--secondary button--icon-trailing" href="#">
  <span class="button__label">Trailing</span>
  <!-- icon: arrow_forward -->
</a>
<a class="button type-button button--secondary button--icon-only" href="#" aria-label="Open in new tab">
  <!-- icon: open_in_new -->
</a>

Leading, trailing and icon-only

States

Hover, press and tab to these buttons to see each state. Disabled and active are shown as static examples.

Default Active

View HTML

<a class="button type-button button--primary" href="#">
  <span class="button__label">Default</span>
</a>
<a class="button type-button button--primary is-active" href="#" aria-current="page">
  <span class="button__label">Active</span>
</a>
<button class="button type-button button--primary" type="button" disabled>
  <span class="button__label">Disabled</span>
</button>

Default, active (current) and disabled

Type	Rest	Hover	Pressed
Primary	Blue 500 fill, white label	Blue 600 fill	Blue 700 fill
Secondary	1px Blue 500 border and label	2px border	2px border, Blue 50 fill
Tertiary	Label only	Blue 50 fill	Blue 100 fill

An active button, the current or selected one, adds a 4px bar along its bottom edge. In dark mode the primary fill becomes Blue 200 with a Blue 900 label; the tokens do this, the component does not change.

On a blue surface

On the Blue 500 band, use the on-brand context. The primary button is white with a Blue 500 label, for the one action the band exists for. The secondary button has a white border and label. Both take a white focus ring.

Continue View the work

View HTML

<a class="button type-button button--primary button--on-brand button--icon-trailing" href="#">
  <span class="button__label">Continue</span>
  <!-- icon: arrow_forward -->
</a>
<a class="button type-button button--secondary button--on-brand" href="#">
  <span class="button__label">View the work</span>
</a>
<button class="button type-button button--secondary button--on-brand" type="button" disabled>
  <span class="button__label">Disabled</span>
</button>

Primary and secondary, on brand

Using buttons

Do

Use one primary button per context.
Write labels as a verb or a clear destination: "Send message", "View HCP website".
Use an <a> when the button goes somewhere and a <button> when it does something.

Don't

Put two primary buttons side by side.
Rely on color alone to show which button is current. Use the active bar.
Use an icon-only button without an aria-label.

Up next

Link

The bold, underlined text link and when to use it.

Continue to Link

Back to Accessibility