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>

Disabled

Like other form elements, buttons can be disabled.

<Button disabled>Submit</Button>

Focused

<Button focused>Submit</Button>

Hover

<Button hover>Submit</Button>

100% width

Button accepts all BoxProps.

<Button width="100%" size="medium">
  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" mr={1}>
    Submit
  </Button>
  <Button variant="secondaryOutline">Cancel</Button>
</form>

All Variants

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