Button

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/components/Buttons/Button"

<!-- primary (button) -->


<!-- secondary (button) -->


<!-- tertiary (button) -->


<!-- primary (link) -->


<!-- secondary (link) -->


<!-- tertiary (link) -->


<!-- disabled -->


// @flow

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

type Props = {|
  url?: string,
  type: 'primary' | 'secondary' | 'tertiary',
  extraClasses?: string,
  icon?: string,
  text: string,
  eventTracking?: string,
  id?: string,
  disabled?: boolean,
  target?: string,
  download?: string,
  rel?: string,
  clickHandler?: (event: Event) => void
|}

const Button = ({
  url,
  type,
  id,
  extraClasses,
  icon,
  text,
  eventTracking,
  disabled,
  target,
  download,
  rel,
  clickHandler
}: Props) => {
  const HtmlTag = url ? 'a' : 'button';
  const fontClasses = extraClasses && extraClasses.indexOf('btn--tertiary') > -1
    ? {s: 'HNM5'}
    : {s: 'HNM4'};
  return (
    <HtmlTag
      href={url}
      target={target}
      download={download}
      rel={rel}
      id={id}
      className={`btn btn--${type} ${extraClasses || ''} ${font(fontClasses)} flex-inline flex--v-center`}
      data-track-event={eventTracking}
      onClick={clickHandler}
      disabled={disabled}>
      <span className='flex-inline flex--v-center'>
        {icon && <Icon name={icon} />}
        <span className='btn__text'>{text}</span>
      </span>
    </HtmlTag>
  );
};

export default Button;
/* primary (button) */
{
  "type": "primary",
  "icon": "email",
  "text": "Email to book"
}

/* secondary (button) */
{
  "type": "secondary",
  "text": "Cancel"
}

/* tertiary (button) */
{
  "icon": "download",
  "type": "tertiary",
  "text": "Download full size"
}

/* primary (link) */
{
  "url": "#",
  "type": "primary",
  "icon": "email",
  "text": "Email to book"
}

/* secondary (link) */
{
  "url": "#",
  "type": "secondary",
  "text": "Cancel"
}

/* tertiary (link) */
{
  "url": "#",
  "icon": "download",
  "type": "tertiary",
  "text": "Download full size"
}

/* disabled */
{
  "type": "primary",
  "disabled": true,
  "icon": "download",
  "text": "Email to book"
}

Button

Used for functional call to action.

Primary button

e.g. 'Book tickets' on Events page

Used for main call to action in a component or page.
May include an icon to emphasise the function.

Primary supporting button

e.g. 'Cancel'

Used with 'Primary button' to provide supporting action.

Secondary button

e.g. 'Download full size', 'Download small' and 'Copy Url' on Works page

Used to support multiple actions in a component. Use icons to place more emphasise to one action over the rest or differentiate each action.

These will be called either as a button or an a element, based on whether a url prop is passed in.