Button

Buttons are the primary way that a user interacts with the platform.

Tertiary Button

The default style. Unless the action you're building is primary, this is the button you should use
<WithTheme(Button) variant="tertiary"> Export Freelancers </WithTheme(Button)>

Primary Button

The primary action of a view. It should be used no more than once per view.
<WithTheme(Button) variant="primary"> Create Project </WithTheme(Button)>

Secondary Button

Used for supporting actions.
<WithTheme(Button) variant="secondary"> Save Changes </WithTheme(Button)>

Flare Button

Used for marketing, and flows in to the app
<WithTheme(Button) variant="flare"> Create Account </WithTheme(Button)>

Delete Button

An action button for deleting/removing.
<WithTheme(Button) variant="delete"> Remove freelancer </WithTheme(Button)>

Action Button

A primary button used for actions - Only ever used once per view
<WithTheme(Button) icon="add" loneIcon={true} size="extra-large" variant="action" />

Disabled Button

Buttons can be disabled by toggling the disabled state. This will prevent any user interaction with the button (onClick will also be disabled).
<WithTheme(Button) disabled={true} onClick={function noRefCheck() {}} variant="tertiary" > Get Started </WithTheme(Button)>

DisabledSuccessButton

Sometimes you want to trigger the success animation while keeping the button disabled/unclickable.
<WithTheme(Button) disabled={true} onClick={function noRefCheck() {}} success={true} variant="tertiary" > Get Started </WithTheme(Button)>

Loading button

A button in a loading state
<WithTheme(Button) loading={true}> Loading Button </WithTheme(Button)>

Loading button with success

Buttons can have callback states that display a message on success
<DemoButton> <WithTheme(Button) loadedTimeout={2000} message="Yey it worked!" variant="primary" > Click me to see the demo </WithTheme(Button)> </DemoButton>

Button with icon

To provide more context to an action, an icon (see the Icon component) can be floated next the button copy.
<WithTheme(Button) icon="mode_edit" variant="tertiary" > Generate invoice </WithTheme(Button)>

Button with lone icon

A button can also be used with a standalone icon
<WithTheme(Button) icon="mode_edit" loneIcon={true} size="medium" variant="tertiary" />

Sizing

Buttons come in three different sizes: small, medium, and large
<ButtonGroup spacing={true}> <WithTheme(Button) size="small" variant="tertiary" > Small </WithTheme(Button)> <WithTheme(Button) size="medium" variant="tertiary" > Medium </WithTheme(Button)> <WithTheme(Button) size="large" variant="tertiary" > Large </WithTheme(Button)> </ButtonGroup>

Button Link

<WithTheme(Button) component="a" variant="tertiary" > Link button </WithTheme(Button)>

Themed button

When used in the platform, primary buttons can inherit their colors from the theme (React only)
<ThemeProvider theme={{ user: { primary: '#4885ed' } }} > <WithTheme(Button) size="large" variant="primary" > A themed button </WithTheme(Button)> </ThemeProvider>