Buttons and links (BL)

Buttons general (G-M7FH)

There are four button atoms within the npower Design System. These are “Primary”, “Secondary”, “Log in” and “Register”. Unusually, they all share the same basic properties, so we’ve created one Sketch Measure file to outline those properties, using a grey button purely for illustration (there is no grey button).

Font-size: 14px.
Padding left and right: 24px.
Line height: 16px.

“Buttons: General” measured output

Primary button (A-64C7)

Description / uses of primary button.

“Primary button” measured output

A-64C7 dev code

<input type="button" value="Primary button" class="primary">

Secondary button (A-4QRL)

Description / uses of secondary button.

“Secondary button” measured output

A-4QRL dev code

<input type="button" value="Secondary button" class="secondary">

Login button (A-3F59)

Description / uses of login button.

“Login button” measured output

A-3F59 dev code

<input type="button" value="Login button" class="login">

Register button (A-S91Q)

Description / uses of login button.

“Register button” measured output

A-S91Q dev code

<input type="button" value="Register button" class="register">