{"size": 2752, "ext": "js", "max_stars_repo_path": "frontend/src/style-guide/sections/Buttons.js", "max_stars_repo_name": "spruce-bruce/daves.pics", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/style-guide/sections/Buttons.js", "max_issues_repo_name": "spruce-bruce/daves.pics", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/style-guide/sections/Buttons.js", "max_forks_repo_name": "spruce-bruce/daves.pics", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 35.2820512821, "max_line_length": 106, "alphanum_fraction": 0.5973837209}
import React from 'react';

function Buttons() {
  return (
    <div className="paper">
      <div className="styleguide__title">Buttons</div>
      <div className="styleguide__row">
        <label>Large</label>
        <button className="button button--color--primary button--size--large">
          Primary
        </button>
        <button className="button button--color--secondary button--size--large">
          Secondary
        </button>
        <button className="button button--color--dark button--size--large">
          Dark
        </button>
        <button className="button button--color--light button--size--large">
          Light
        </button>
      </div>
      <div className="styleguide__row">
        <label>Small</label>
        <button className="button button--color--primary button--size--small">
          Primary
        </button>
        <button className="button button--color--secondary button--size--small">
          Secondary
        </button>
        <button className="button button--color--dark button--size--small">
          Dark
        </button>
        <button className="button button--color--light button--size--small">
          Light
        </button>
      </div>
      <div className="styleguide__row">
        <label>Disabled</label>
        <button className="button button--color--primary button--size--small button--disabled" disabled>
          Primary
        </button>
        <button className="button button--color--secondary button--size--small button--disabled" disabled>
          Secondary
        </button>
        <button className="button button--color--dark button--size--small button--disabled" disabled>
          Dark
        </button>
        <button className="button button--color--light button--size--small button--disabled" disabled>
          Light
        </button>
      </div>
      <div className="styleguide__row">
        <label>Outline</label>
        <button className="button button--color--primary button--size--small button--theme--outline">
          Primary
        </button>
        <button className="button button--color--secondary button--size--small button--theme--outline">
          Secondary
        </button>
        <button className="button button--color--dark button--size--small button--theme--outline">
          Dark
        </button>
        <button className="button button--color--light button--size--small button--theme--outline">
          Light
        </button>
      </div>
      <div className="styleguide__row">
        <label>Full Width</label>
        <button className="button button--color--primary button--size--small button--full-width">
          Primary
        </button>
      </div>
    </div>
  );
}

export default Buttons;
