<button class="button _light " 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": "_light",
"on": null,
"rel": null,
"style": null,
"tabindex": "0",
"target": null,
"text": "Start Your Free Trial",
"type": null,
"unstyled": null,
"option": null,
"selected": null
}
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;
@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;
}
}
}
@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;
}
.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;
}
}
There are no notes for this item.