Buttons

Button States

Standard buttons
Default Hover/Focus Active Muted/Disabled Class name
Clear background .pm-button
Dark background .pm-button-dark
Blue buttons
Default Hover/Focus Active Muted/Disabled Class name
Blue buttons .pm-button-blue
Clear background .pm-button-blueborder
Dark background .pm-button-blueborder-dark
Green buttons
Default Hover/Focus Active Muted/Disabled Class name
Green buttons .pv-button-green
Clear background .pv-button-greenborder
Dark background .pv-button-greenborder-dark

Note: except the pm-button--link alias/modifier, all pm-buttons do not have any text-decoration, even when applied to a tag.

The modifier pm-button--noborder may be applied to remove border in all cases.

Button with icon centered (code to come)

Button Sizes

Add pm-button--large or pm-button--small to the button:

<button class="pm-button pm-button--large">Button</button>

Button aliases/modifiers (for ProtonMail)

.pm-button--primary
.pm-button--primary
.pm-button--primaryborder
.pm-button--primaryborder
.pm-button--primaryborder-dark
.pm-button--link
.pm-button--link
.pm-button--currentColor
.pm-button--error
.pm-button--warning
.pm-button--info
.pm-button--redborder
.pm-button--whiteborder

If you need to have another element (than button) looking like a link, you can use the class .link.

Button Groups

Add pm-group-buttons on the container and pm-group-button to each button:

<div class="pm-group-buttons">
  <button class="pm-group-button">button</button>
  <button class="pm-group-button">button</button>
  <button class="pm-group-button">button</button>
  <button class="pm-group-button" disabled>button</button>
</div>

This will only add the “behaviour” for group, not the design. Examples, to achieve this:

<div class="pm-group-buttons">
  <button class="pm-group-button pm-button-blueborder">button</button>
  <button class="pm-group-button pm-button-blueborder">button</button>
  <button class="pm-group-button pm-button-blueborder">button</button>
  <button class="pm-group-button pm-button-blueborder" disabled>button</button>
</div>

States classes

If needed, you have the classes is-hover or is-active, so to achieve this example:

<div class="pm-group-buttons">
  <button class="pm-group-button pv-button-greenborder">button</button>
  <button class="pm-group-button pv-button-greenborder is-active">button</button>
  <button class="pm-group-button pv-button-greenborder">button</button>
  <button class="pm-group-button pv-button-greenborder" disabled>button</button>
</div>

Aliases

<div class="pm-group-buttons">
  <button class="pm-group-button pm-button--primaryborder">button</button>
  <button class="pm-group-button pm-button--primaryborder">button</button>
  <button class="pm-group-button pm-button--primaryborder">button</button>
  <button class="pm-group-button pm-button--primaryborder disabled">button</button>
</div>

Aligning buttons near button groups

As button groups use flexbox, to avoid bad alignments*, please wrap the next button into a div class="inline-flex ml1":

* CSS is awesome.

Example with primary buttons

Modifier for buttons/icons

You may also use .pm-button--for-icon modifier, specially designed to adapt padding values for buttons that contains only an icon. Example:

<div class="pm-group-buttons">
  <button class="pm-group-button pm-button pm-button--for-icon">…</button>
  <button class="pm-group-button pm-button pm-button--for-icon">…</button>
  <button class="pm-group-button pm-button pm-button--for-icon">…</button>
</div>

For very small buttons, you may use pm-button--for-smallicon.

Loading button

For loading content, you may have a look at loading content section.