Skip to content
Snippets Groups Projects
Select Git revision
  • 18166e53f99ab28a210bd6655da07ec2be1489e7
  • master default protected
  • 2.0.0-alpha-11
  • 2.0.0-alpha-10
  • 2.0.0-alpha-9
  • 2.0.0-alpha-8
  • 2.0.0-alpha-7
  • 2.0.0-alpha-6
  • 2.0.0-alpha-5
  • 2.0.0-alpha-4
  • 2.0.0-alpha-3
  • 2.0.0-alpha-2
  • 2.0.0-alpha-1
  • 1.8.0
  • 1.7.0
  • 1.6.4
  • 1.6.3
  • 1.6.2
  • 1.6.1
  • 1.6.0
  • 1.5.5
  • 1.5.4
22 results

flag-size-variants.mustache

Blame
  • Forked from TO / Weby / ui-styleguide
    Source project has a limited visibility.
    Button.jsx 1.13 KiB
    import React from "react";
    import { NavLink } from "react-router-dom";
    import classNames from "classnames";
    
    const Button = ({
      className,
      iconWrapperClassName,
      icon,
      color = "black",
      iconChildren = null,
      hoverActive = true,
      fullwidth = false,
      loading = false,
      children,
      routerTo,
      ...props
    }) => {
      const btnClass = classNames(
        "btn",
        `btn--${color}`,
        {
          "btn--icon": !!icon,
          "btn--hoveractive": hoverActive,
          "btn--fullwidth md:btn--autowidth": fullwidth,
          "btn--loading": loading,
        },
        className
      );
    
      const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);
    
      const inner = (
        <div className="btn__body-wrap">
          <div className="btn__body">{children}</div>
          {!!icon && (
            <div className={iconWrapperClass}>
              <i className={icon}></i>
              {iconChildren}
            </div>
          )}
        </div>
      );
    
      if (routerTo) {
        return (
          <NavLink to={routerTo} className={btnClass} {...props}>
            {inner}
          </NavLink>
        );
      }
    
      return (
        <button className={btnClass} {...props}>
          {inner}
        </button>
      );
    };
    
    export default Button;