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:
We’ve changed the
<a>tag to a
<button>tag and stripped the
HREFattribute. 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
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
- We added
background: none;to style definition to override some defaults that might affect visibility caused by changing the
<a>tag to the
- We added
- 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
selectedwhen the node associated with the button is selected, and
disabledwhen any other node was selected for this decision.
Take proper care with licenses. Make sure you have permission to use shared code from the Internet, and provide attribution when required. More about Codepen licensing here