<button class="button _submit " tabindex="0">
        Start Your Free Trial
    </button>
{{#if href}}
	<a href="{{{href}}}"
       class="{{#unless unstyled}}button{{/unless}} {{modifier}} {{#if arrowafter}}icon _arrow _after{{/if}}"
       {{#if id}}id="{{id}}"{{/if}}
       {{#if style}}style="{{style}}"{{/if}}
       {{#if ariacontrols}} aria-controls="{{ariacontrols}}"{{/if}}
       {{#if tabindex}} tabindex="{{tabindex}}"{{/if}}
       {{#if dataplan}} data-plan="{{dataplan}}"{{/if}}
       {{#if target}} target="{{target}}"{{/if}}
       {{#if rel}} rel="{{rel}}"{{/if}}
       {{#if disabled}} disabled aria-disabled="true"{{/if}}
    >
        {{{text}}}
        {{> @children}}
    </a>
{{else}}
    <button
        class="{{#unless unstyled}}button{{/unless}} {{modifier}} {{#if arrowafter}}icon _arrow _after{{/if}}"
        {{#if id}}id="{{id}}"{{/if}}
        {{#if style}}style="{{style}}"{{/if}}
        {{#if type}}type="{{type}}"{{/if}}
        {{#if ariacontrols}} aria-controls="{{ariacontrols}}"{{/if}}
        {{#if tabindex}} tabindex="{{tabindex}}"{{/if}}
        {{#if dataplan}} data-plan="{{dataplan}}"{{/if}}
        {{#if disabled}} disabled{{/if}}
        {{#if on}} on="{{on}}"{{/if}}
        {{#if option}} option="{{option}}"{{/if}}
        {{#if selected}} selected{{/if}}
    >
        {{{text}}}
        {{> @children}}
    </button>
{{/if}}
{
  "ariacontrols": null,
  "arrowafter": null,
  "dataplan": null,
  "disabled": null,
  "id": null,
  "href": null,
  "modifier": "_submit",
  "on": null,
  "rel": null,
  "style": null,
  "tabindex": "0",
  "target": null,
  "text": "Start Your Free Trial",
  "type": null,
  "unstyled": null,
  "option": null,
  "selected": null
}
  • Content:
    const React = require('react');
    const cx = require('classnames');
    
    const Button = (props) => {
        if (props.href) {
            return (
                <a
                    href={props.href}
                    className={cx(['button', props.modifier])}
                    tabindex={props.tabindex}
                >
                    {props.text}
                </a>
            );
        } else {
            return (
                <button
                    className={cx(['button', props.modifier])}
                    type={props.type}
                    tabindex={props.tabindex}
                >
                    {props.text}
                </button>
            );
        }
    };
    
    module.exports = Button;
    
  • URL: /components/raw/button/Button.jsx
  • Filesystem Path: components/atoms/Button/Button.jsx
  • Size: 651 Bytes
  • Content:
    @import "../../axioms/Button";
    @import "./ButtonBase";
    .button {
        &._block {
            display: block;
            width: 100%;
        }
        &._large {
            @extend .Button--large;
        }
        &._small {
            @include button-size($button-height-small);
        }
        &._smaller {
            min-width: 0;
            padding: 0;
            margin: 0;
            line-height: 1.5;
        }
        &._dark {
            @include button-color(theme-color(text, inverse), theme-color(main, dark), theme-color(main, dark), theme-color(main, dark), transparent, theme-color(main, dark));
        }
        &._dark._inverse {
            @include button-color(theme-color(main, dark), transparent, theme-color(main, dark), theme-color(text, inverse), theme-color(main, dark), theme-color(main, dark));
        }
        &.Button--neutral {
            @include button-color(get-color(neutral, 900), transparent, get-color(neutral, 900), get-color(neutral, 0), get-color(neutral, 900), get-color(neutral, 900));
        }
        &._primary {
            @extend .Button--primary;
        }
        &._secondary {
            @extend .Button--secondary;
            &._social {
                @include button-color(get-color(neutral, 400), transparent, get-color(neutral, 400), get-color(neutral, 0), theme-color(primary), transparent);
                min-width: 0;
                padding-top: .25rem;
                padding-bottom: .25rem;
            }
            &._social._twitter {
                @include button-color(get-color(neutral, 400), transparent, get-color(neutral, 400), get-color(neutral, 0), get-network-color(twitter), transparent);
            }
            &._social._facebook {
                @include button-color(get-color(neutral, 400), transparent, get-color(neutral, 400), get-color(neutral, 0), get-network-color(facebook), transparent);
            }
            &._social._linkedin {
                @include button-color(get-color(neutral, 400), transparent, get-color(neutral, 400), get-color(neutral, 0), get-network-color(linkedin), transparent);
            }
        }
        &._secondary._solid {
            @include button-color(get-color(neutral, 0), theme-color(secondary), $button-background-color-hover: theme-color(secondary, dark));
        }
        &._blue {
            @include button-color(get-color(neutral, 0), get-color(aqua, 600));
        }
        &._twitterblue {
            @include button-color(get-color(neutral, 0), get-network-color(twitter));
        }
        &._gray {
            @include button-color(get-color(neutral, 0), get-color(neutral, 800));
        }
        &._next {
            @include button-next;
        }
        &._previous {
            @include button-previous;
        }
        &._up {
            @include button-up;
        }
        &._down {
            @include button-down;
        }
        &._largesubmit,
        &._submit {
            @extend .Button--submit;
        }
        &._largesubmit {
            @include button-size($button-height-large, $button-font-size-large);
            display: block;
            width: calc(100% - 20px);
            max-width: 300px;
            margin-right: auto;
            margin-left: auto;
            &:not(:not(a)) {
                max-width: percentage(2/3);
            }
        }
        &._light {
            @extend .Button--light;
        }
    }
    .Button--warning {
        @include button-color(
            $button-text-color: get-color(neutral, 0),
            $button-background-color: get-color(red, 800),
            $button-background-color-hover: get-color(red, 900)
        );
    }
    .button-group {
        @include clearfix;
        & > .button {
            float: left;
            &:first-child:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
            &:last-child:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
            &:active {
                transform: none;
            }
        }
    }
    
  • URL: /components/raw/button/Button.scss
  • Filesystem Path: components/atoms/Button/Button.scss
  • Size: 3.8 KB
  • Content:
    @import "../../axioms/Button";
    .button {
        @include button;
        &.Button--large {
            @include button-size($button-height-large, $button-font-size-large);
        }
        &.Button--primary {
            @include button-color(get-color(neutral, 0), theme-color(primary), $button-background-color-hover: theme-color(primary, dark));
        }
        &.Button--secondary {
            @include button-bordered(theme-color(secondary), transparent);
        }
        &.Button--light {
            @include button-color(
                $button-text-color: get-color(neutral, 900),
                $button-background-color: get-color(neutral, 100),
                $button-text-color-hover: get-color(neutral, 900),
                $button-background-color-hover: get-color(neutral, 0)
            );
        }
        &.Button--submit {
            @include button-loader($button-height: $button-height-large);
        }
        &._inverse {
            @include button-color(get-color(neutral, 0), transparent, get-color(neutral, 0), get-color(neutral, 900), get-color(neutral, 0), transparent);
        }
        &._white {
            @include button-color(theme-color(link), get-color(neutral, 0), transparent, get-color(neutral, 0), theme-color(link, dark), transparent);
        }
        &._link {
            @include button-color(theme-color(link), transparent, transparent);
            &:hover {
                text-decoration: underline;
            }
        }
        &._link._white {
            color: get-color(neutral, 0);
        }
    }
    .button:disabled {
        @include button-color(
            get-color(neutral, 0),
            get-color(neutral, 500),
            transparent,
            get-color(neutral, 0),
            get-color(neutral, 500)
        );
        cursor: default;
    }
    
  • URL: /components/raw/button/ButtonBase.scss
  • Filesystem Path: components/atoms/Button/ButtonBase.scss
  • Size: 1.7 KB
  • Content:
    .Button--raised {
        @include Elevation("Button-hover");
        &:hover,
        &:focus {
            @include Elevate("Button-hover");
        }
        &:active {
            @include Elevate("Button-pressed");
        }
    }
    .Button--legible {
        @include override-spacedout;
        @include font-size-small;
        &._large {
            @include font-size-base;
        }
    }
    
  • URL: /components/raw/button/RaisedButton.scss
  • Filesystem Path: components/atoms/Button/RaisedButton.scss
  • Size: 338 Bytes

There are no notes for this item.