Buttons

A button should lead the user to a certain action.

Unique labels give the user a clear message which action is exactly triggered.

Overall styling#

  • The text-style is button-text.
  • The line-height is set to default.
  • All buttons have a fixed height of 48px.
  • Secondary buttons have an outline with 1px thickness.

Do's#

  • Keep the text short and use as few words as possible.
  • Always use a specific call to action text.
  • Choose a unique button labeling to send a clear message which action is exactly triggered by the button.
  • Ensure consistent labelling across the user journey.
  • Be sure to allow enough space for translation into other languages.
  • Button with an icon may only be used in combination with an input field.

Dont's#

  • Do not use more than two buttons below each other.
  • Avoid exclamation marks.

Types#

  • Each button level is available in a positive and a negative version.
  • This allows you to layout on a light or dark background.

Primary#

  • Our primary button is also our Call-to-Action (CTA) button.
  • It can only be used once per page!
VersionPreview
 PositivePrimary positive
NegativePrimary negative

Secondary#

  • Use our secondary button if you want to show more than one button.
  • It can only be used in conjunction with the primary button!
VersionPreview
 PositiveSecondary positive
NegativeSecondary negative

States#

Positive#

Primary#

StateOverall stylingPreview
Defaultbackground: brand-primary-base
font-color: basic-white		Positive primary default
Hover, focus and activebackground: brand-primary-darker
font-color: basic-white		Positive primary hover, focus & active

Secondary#

StatusOverall stylingPreview
Defaultoutline-color: brand-primary-base
font-color: brand-primary-base		Positive secondary default
Hover, focus and activebackground: brand-primary-darker
font-color: basic-white		Positive secondary hover, focus & active

Negative#

Primary#

StatusOverall stylingPreview
Defaultbackground: basic-white
font-color: brand-primary-base		Negative primary default
Hover, focus and activebackground: gray-light
font-color: brand-primary-base		Negative primary hover, focus & active

Secondary#

StatusOverall stylingPreview
Defaultoutline-color: basic-white
font-color: basic-white		Negative secondary default
Hover, focus and activebackground: gray-light
font-color: brand-primary-base		Negative secondary hover, focus & active

Spacing & measurements#

TypeAttributes Preview
Height48pxbutton height
HorizontalButtons can be variable in width but text is always centered and has 16px minimum spacing left and right.button padding
Verticaltext is vertically centeredbutton vertical
Distance16px between two buttonsbutton distance

Change log#

4.1.0 Mail - 2022-09-05#

Changed#

  • Doc: "Button" | Changed color description for hover-focus-active state

1.1.0 Mail - 2021-07-22#

Changed#

  • Doc: "Button" | Cleaned up the documentation for the right structure and sentence case
  • Doc: "Button" | Changed horizontal and vertical spacing description

1.0.0 Mail - 2021-06-24#

Highlights#

  • Sketch: "Button" | New layer-styles, text-styles and color-variables settings
  • Sketch, Doc: "Button" | New disabled buttons available

Changed#

  • Doc: "Button" | Updated documentation

Added#

  • Sketch: "Button" | Hover, focus and active states were added

1.0.0-beta.2 - 2020-01-16#

Changed#

  • "Button" | Changed symbols to new smart layout of Sketch