Buttons

Please refer to the Digital Foundations ↗ documentation for guidelines on call to actions ↗. In addition to those guidelines, the following also apply to buttons in the Rivendell design system:

Button Guidelines

All buttons use Aperçu-Bold in title case.

Primary and secondary buttons have a left & right padding of 50px.

Tertiary buttons have no left or right padding and text is left aligned.

Primary and secondary buttons have a border-radius of 5px.

All buttons are the same height and can be paired together for multiple CTAs — a 30px margin should separate buttons paired together.

Button Animation

There is a subtle fade transition from normal to hover state on buttons.

transition: all 0.2s;

Button Usage

Ideally, most buttons should be used in isolation, paired with copy, so there is a clear function of the button, to action something or navigate somewhere.

When there are multiple calls to action or options — consider the hierarchy ↗ of your CTAs and positive vs neutral actions ↗ when deciding which button styles to use, and the wording and intent of your buttons.

Button Pairing Best Practices

Below are some suggestions for when more than one call-to-action is necessary.