Button Button

<button class="btn btn--light font-HNM5-s">
    <div class="icon ">
        <canvas class="icon__canvas" height="26" width="26"></canvas>
        <svg class="icon__svg" aria-hidden="true">
            <svg viewBox="0 0 26 26">
                <path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path>
                <path class="icon__shape" d="M14.93 10.74h-2.08V8.67a1 1 0 0 0-2 0v2.08H8.78a1 1 0 0 0 0 2h2.08v2.08a1 1 0 0 0 2 0v-2.09h2.08a1 1 0 0 0 0-2z"></path>
            </svg>
        </svg>
    </div><span class="btn__text">this is a button</span>
</button>
// @flow

import {font} from '../../../../utils/classnames';
import Icon from '../../Icon/Icon';

type Props = {|
  extraClasses?: string,
  icon?: string,
  text: string,
  eventTracking?: string,
  id?: string,
  clickHandler?: (event: Event) => void
|}

const ButtonButton = ({id, extraClasses, icon, text, eventTracking, clickHandler}: Props) => (
  <button
    id={id}
    className={`btn ${extraClasses || ''} ${font({s: 'HNM5'})}`}
    data-track-event={eventTracking}
    onClick={clickHandler}>
    {icon && <Icon name={icon} />}
    <span className='btn__text'>{text}</span>
  </button>
);

export default ButtonButton;
{
  "extraClasses": "btn--light",
  "icon": "zoomIn",
  "text": "this is a button"
}
  • Handle: @button-button
  • Preview:
  • Filesystem Path: ../common/views/components/Buttons/ButtonButton/ButtonButton.js

There are no notes for this item.