Button

<Button type="button" variant="primary" size="large" title="Test" />

<Button type="button" variant="secondary" size="large" title="Test" />

<Button type="button" variant="ghost" size="large" title="Test" />

<Button type="button" variant="primary" size="xlarge" title="Test" />
<Button type="button" variant="primary" size="large" title="Test" />
<Button type="button" variant="primary" size="medium" title="Test" />
<Button type="button" variant="primary" size="small" title="Test" />

<Button type="button" variant="secondary" size="xlarge" title="Test" />
<Button type="button" variant="secondary" size="large" title="Test" />
<Button type="button" variant="secondary" size="medium" title="Test" />
<Button type="button" variant="secondary" size="small" title="Test" />

<Button type="button" variant="ghost" size="xlarge" title="Test" />
<Button type="button" variant="ghost" size="large" title="Test" />
<Button type="button" variant="ghost" size="medium" title="Test" />
<Button type="button" variant="ghost" size="small" title="Test" />

<Button type="button" variant="primary" state="danger" size="large" title="Test" />
<Button type="button" variant="primary" state="warning" size="large" title="Test" />
<Button type="button" variant="primary" state="success" size="large" title="Test" />

<Button type="button" variant="secondary" state="danger" size="large" title="Test" />
<Button type="button" variant="secondary" state="warning" size="large" title="Test" />
<Button type="button" variant="secondary" state="success" size="large" title="Test" />

<Button type="button" variant="ghost" state="danger" size="large" title="Test" />
<Button type="button" variant="ghost" state="warning" size="large" title="Test" />
<Button type="button" variant="ghost" state="success" size="large" title="Test" />

<Button
  type="button"
  variant="primary"
  size="large"
  gradients={['#FBAB7E', '#F7CE68']}
  title="Test"
/>
<Button
  type="button"
  variant="primary"
  size="large"
  gradients={['#21D4FD', '#B721FF']}
  title="Test"
/>

<Button type="button" variant="primary" size="large" bg="#B721FF" color="#fff" title="Test" />
<Button type="button" variant="secondary" size="large" borderColor="#B721FF" title="Test" />
<Button type="button" variant="ghost" size="large" color="#B721FF" title="Test" />

<Button icon={<img src={ExampleIcon} alt="test" />} iconPosition="left" type="button" variant="primary" size="large" title="Test" />
<Button icon={<img src={ExampleIcon} alt="test" />} iconPosition="right" type="button" variant="primary" size="large" title="Test" />