Buttons

Buttons are needed in the user interface to create affordance. This means buttons provide understanding of the actions that user can take. Also buttons provide more focus to more frequently used actions reducing interaction cost with them.

This is our primary button.

1() => {
2 return (
3 <>
4 <p>
5 <PrimaryButton data-marker="primary-button" onClick={action("clicked")}>
6 Button
7 </PrimaryButton>
8 </p>
9 <p>
10 <PrimaryButton disabled={true} onClick={action("clicked")}>
11 Disabled
12 </PrimaryButton>
13 </p>
14 </>
15 );
16}

The button is made with two atoms. The Shape and the Text label. Theme settings are 3px border-radius, color: #1276DC, arial bold 14pt #FFFFFF

text label has paddings 8, 16, 8, 16

the button has margin 16,20,16,20

1() => {
2 return (
3 <>
4 <p>
5 <PrimaryButton data-marker="primary-button" onClick={action("clicked")}>
6 Button
7 </PrimaryButton>
8 </p>
9 <p>
10 <PrimaryButton disabled={true} onClick={action("clicked")}>
11 Disabled
12 </PrimaryButton>
13 </p>
14 </>
15 );
16}
This is secondary button. Default theme settings. border-color: #C8CACC lightgrey border-radius: 3px base-color: #F0F1F2 secondary Arial bold 14pt