Custom Decision Button

This example shows how to implement a custom decision button, based on fancy buttons by David Conner.

In order to adjust the Codepen source to work with our interactive video, we had to make a few changes:

• Markup

  • We’ve changed the <a> tag to a <button> tag and stripped the HREF attribute. This is to maintain markup semantics, since this component is going to be used as a button and not as a link. We’ve also changed the class attribute to className, because that’s how things roll in the world of React.

  • We need our component to have its own markup structure, just like in the Codepen, and for that we can override EkoButton‘s getContent method.

• Design

  • We added background: none; to style definition to override some defaults that might affect visibility caused by changing the <a> tag to the <button> tag.
• Logic
  • Originally the button only had an idle state and a hover state. If your button is used to reflect a decision, it’s important to reflect the decision state visually. For example, we want the button to show when the decision associated with it was selected, or perhaps when a different option was selected.
  • A good way to go about it is to alter which className is present in the DOM based on the decision state. Here we use EkoDecisionButton‘s selected when the node associated with the button is selected, and disabled when any other node was selected for this decision.

Regarding licenses and using code from Codepen

Take proper care with licenses. Make sure you have permission to use shared code from the Internet, and provide attribution when required. >

Further reading: Codepen licensing