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.
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.
<Buttonloading>Show more</Button>
Disabled
Like other form elements, buttons can be disabled.
<Buttondisabled>Submit</Button>
Focused
<Buttonfocused>Submit</Button>
Hover
<Buttonhover>Submit</Button>
100% width
Button accepts all BoxProps.
<Buttonwidth="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: