Primary buttons should be used for the primary desired user action. Do not use two primary buttons in the same screen. If there are multiple primary options, use secondary-gray.

<Button>Purchase</Button>

Our secondary-outline is our default secondary button style. Avoid using this in the presence of inputs, as to not confuse it’s use.

<Flex>
  <Button mr={1}>Purchase</Button>
  <Button variant="secondaryOutline">Make offer</Button>
</Flex>

When needing to provide the ability to show more content, we always use the secondary-outline style.

Loading states

The loading state is used when there may be a delay in response time, ie, bidding, or following an artist.

<Button loading>Show more</Button>

In the presence of inputs, use secondary-gray for the secondary button style.

<Flex flexDirection="column" width="50%">
  <Input type="text" placeholder="Username" />
  <Button variant="secondaryGray" mt={1}>
    Add another
  </Button>
</Flex>

Disabled

Like other form elements, buttons can be disabled.

<Button disabled>Submit</Button>

Focused

<Button focused>Submit</Button>

Hover

<Button hover>Submit</Button>

Block

Use block to style a button to be 100% width of its container.

<Button block width="100%" size="medium" m={0.5}>
  Reset
</Button>

Inline

Use inline to remove height and padding from the button, can be used in combination of noOutline to create an inline button.

<Button inline variant="noOutline" size="small" m={0.5}>
  Reset
</Button>

In the context of a form

A button defaults to type submit, so when used in the context of a form, a click will submit the form. This means that if you have more than one Button in a form, you'll probably want to override the type of one of the buttons:

<form>
  <Button type="button" block>
    Submit
  </Button>
  <Button variant="secondaryGray" block>
    Cancel
  </Button>
</form>

All Variants

<>
  <Button variant="primaryBlack" size="small" m={0.5}>
    Follow
  </Button>
  <Button variant="primaryBlack" size="medium" m={0.5}>
    Follow
  </Button>
</>
<>
  <Button variant="secondaryGray" size="small" m={0.5}>
    Follow
  </Button>
  <Button variant="secondaryGray" size="medium" m={0.5}>
    Follow
  </Button>
</>
<>
  <Button variant="secondaryOutline" size="small" m={0.5}>
    Follow
  </Button>
  <Button variant="secondaryOutline" size="medium" m={0.5}>
    Follow
  </Button>
</>
<Box bg="black" p={1} m={0.5}>
  <Button variant="primaryWhite" size="small" m={0.5}>
    Follow
  </Button>
  <Button variant="primaryWhite" size="medium" m={0.5}>
    Follow
  </Button>
</Box>
<>
  <Button variant="noOutline" size="small" m={0.5}>
    Reset
  </Button>
  <Button variant="noOutline" size="medium" m={0.5}>
    Reset
  </Button>
</>
On this page
Loading states
Disabled
Focused
Hover
Block
Inline
In the context of a form
All Variants