Button

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

Props

NameTypeDescription
children
anyButton contents
message
stringA message to display after loading
role
stringAn ARIA role to pass down
disabled
boolIs the button disabled?
icon
stringAn icon from our icon set to display
loneIcon
boolIs the icon the only child? The button will be displayed as a square if true
wide
boolShould the button expand to 100% of the parent?
size
enumThe visual size ('small' | 'medium' | 'large' | 'extra-large')
variant
enumThe visual theme ('primary' | 'secondary' | 'tertiary' | 'delete' | 'action' | 'flare')
grouped
boolIgnore - Set by ButtonGroup
spacing
boolIgnore - Set by ButtonGroup
flex
boolExpand the button using flex
active
boolIs the button active? - Useful for when a button is used as a nav pill
loading
boolIs the button loading? - This will replace the content with a spinner
success
boolDisplays the callback message if the loading was successful
onClick
funcA function to call on user interaction
loadedTimeout
numberAfter a successful load, how long should the UI wait before continuing?
component
unionOverride the component - Use with caution
name
stringA name to pass down to the DOM
type
stringA type to pass down to the DOM
subdued
boolPlaces the button in a visually subdued state
singleRenderChildren
anyChildren that should not be double rendered - See ButtonDropdown
className
unionClass to pass down
style
objectStyle to pass down

Tertiary Button

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

Primary Button

The primary action of a view. It should be used no more than once per view.
<Button> Create Project </Button>

Secondary Button

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

Flare Button

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

Delete Button

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

Action Button

A primary button used for actions - Only ever used once per view
<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).
<Button disabled={true} onClick={function noRefCheck() {}} variant="tertiary" > Get Started </Button>

DisabledSuccessButton

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

Loading button

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

Loading button with success

Buttons can have callback states that display a message on success
<DemoButton> <Button loadedTimeout={2000} message="Yey it worked!" > Click me to see the demo </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.
<Button icon="mode_edit" variant="tertiary" > Generate invoice </Button>

Button with lone icon

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

Sizing

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

Button Link

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

Themed button

When used in the platform, primary buttons expose their CSS custom properties making them overridable.
<div style={{ '--ui-user-primary': '#0d7ef2', '--ui-user-primary--lighter': '#cad9e8' }} > <Button> A themed button </Button> </div>