Button

<Button>active</Button>
<Button disabled>disabled</Button>
<Button showLoader>with loader</Button>
<Button showArrow>with arrow</Button>
<Button icon={<Balance24 />}>with icon</Button>
<div>
  <Button icon={<Balance24 />} />
</div>

<Button theme="green-soft">active</Button>
<Button theme="green-soft" disabled>
  disabled
</Button>
<Button theme="green-soft" showLoader>
  with loader
</Button>
<Button theme="green-soft" showArrow>
  with arrow
</Button>
<Button theme="green-soft" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="green-soft" icon={<Balance24 />} />
</div>

<Button theme="purple">active</Button>
<Button theme="purple" disabled>
  disabled
</Button>
<Button theme="purple" showLoader>
  with loader
</Button>
<Button theme="purple" showArrow>
  with arrow
</Button>
<Button theme="purple" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple" icon={<Balance24 />} />
</div>

<Button theme="purple-soft">active</Button>
<Button theme="purple-soft" disabled>
  disabled
</Button>
<Button theme="purple-soft" showLoader>
  with loader
</Button>
<Button theme="purple-soft" showArrow>
  with arrow
</Button>
<Button theme="purple-soft" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple-soft" icon={<Balance24 />} />
</div>

<Button theme="white">active</Button>
<Button theme="white" disabled>
  disabled
</Button>
<Button theme="white" showLoader>
  with loader
</Button>
<Button theme="white" showArrow>
  with arrow
</Button>
<Button theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="white" icon={<Balance24 />} />
</div>

<Button type="outline">active</Button>
<Button type="outline" disabled>
  disabled
</Button>
<Button type="outline" showLoader>
  with loader
</Button>
<Button type="outline" showArrow>
  with arrow
</Button>
<Button type="outline" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" icon={<Balance24 />} />
</div>

<Button type="outline" theme="purple">
  active
</Button>
<Button type="outline" theme="purple" disabled>
  disabled
</Button>
<Button type="outline" theme="purple" showLoader>
  with loader
</Button>
<Button type="outline" theme="purple" showArrow>
  with arrow
</Button>
<Button type="outline" theme="purple" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="purple" icon={<Balance24 />} />
</div>

<Button type="outline" theme="white">
  active
</Button>
<Button type="outline" theme="white" disabled>
  disabled
</Button>
<Button type="outline" theme="white" showLoader>
  with loader
</Button>
<Button type="outline" theme="white" showArrow>
  with arrow
</Button>
<Button type="outline" theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="white" icon={<Balance24 />} />
</div>

<Button type="outline" theme="black">
  active
</Button>
<Button type="outline" theme="black" disabled>
  disabled
</Button>
<Button type="outline" theme="black" showLoader>
  with loader
</Button>
<Button type="outline" theme="black" showArrow>
  with arrow
</Button>
<Button type="outline" theme="black" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="black" icon={<Balance24 />} />
</div>

<Button theme="green" type="text">
  active
</Button>
<Button theme="green" type="text" disabled>
  disabled
</Button>
<Button theme="green" type="text" showLoader>
  with loader
</Button>
<Button theme="green" type="text" showArrow>
  with arrow
</Button>
<Button theme="green" type="text" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="green" type="text" icon={<Balance24 />} />
</div>

<Button theme="purple" type="text">
  active
</Button>
<Button theme="purple" type="text" disabled>
  disabled
</Button>
<Button theme="purple" type="text" showLoader>
  with loader
</Button>
<Button theme="purple" type="text" showArrow>
  with arrow
</Button>
<Button theme="purple" type="text" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple" type="text" icon={<Balance24 />} />
</div>

<Button type="text" theme="white">
  active
</Button>
<Button type="text" theme="white" disabled>
  disabled
</Button>
<Button type="text" theme="white" showLoader>
  with loader
</Button>
<Button type="text" theme="white" showArrow>
  with arrow
</Button>
<Button type="text" theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="white" icon={<Balance24 />} />
</div>

<Button type="text" theme="black">
  active
</Button>
<Button type="text" theme="black" disabled>
  disabled
</Button>
<Button type="text" theme="black" showLoader>
  with loader
</Button>
<Button type="text" theme="black" showArrow>
  with arrow
</Button>
<Button type="text" theme="black" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="black" icon={<Balance24 />} />
</div>

<Button type="text" theme="danger">
  active
</Button>
<Button type="text" theme="danger" disabled>
  disabled
</Button>
<Button type="text" theme="danger" showLoader>
  with loader
</Button>
<Button type="text" theme="danger" showArrow>
  with arrow
</Button>
<Button type="text" theme="danger" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="danger" icon={<Balance24 />} />
</div>

<Button sizeAll="extra-small">Extra small</Button>
<Button sizeAll="small">Small</Button>
<Button sizeAll="medium">Medium</Button>
<Button sizeAll="large">Large</Button>
<Button
  sizeWide="large"
  sizeDesktop="medium"
  sizeTablet="small"
  sizeMobile="extra-small"
>
  Adaptive
</Button>

<Button sizeAll="extra-small" showArrow>
  Extra small
</Button>
<Button sizeAll="small" showArrow>
  Small
</Button>
<Button sizeAll="medium" showArrow>
  Medium
</Button>
<Button sizeAll="large" showArrow>
  Large
</Button>

<Button sizeAll="extra-small" icon={<Balance16 />}>
  Extra small
</Button>
<Button sizeAll="small" icon={<Balance24 />}>
  Small
</Button>
<Button sizeAll="medium" icon={<Balance24 />}>
  Medium
</Button>
<Button sizeAll="large" icon={<Balance24 />}>
  Large
</Button>

<div>
  <Button sizeAll="extra-small" icon={<Balance16 />} />
</div>
<div>
  <Button sizeAll="small" icon={<Balance24 />} />
</div>
<div>
  <Button sizeAll="medium" icon={<Balance24 />} />
</div>
<div>
  <Button sizeAll="large" icon={<Balance24 />} />
</div>

<Button sizeAll="extra-small" showLoader>
  Extra small
</Button>
<Button sizeAll="small" showLoader>
  Small
</Button>
<Button sizeAll="medium" showLoader>
  Medium
</Button>
<Button sizeAll="large" showLoader>
  Large
</Button>

<Button fullWidth>Full Width Button</Button>

<Button fullWidthMobile>Full Width Mobile Button</Button>

<Button ellipsis>Long button text</Button>

<Button href="#">Link</Button>
<Button href="#" disabled>
  Disabled Link
</Button>
<Button href="#" target="_blank">
  Target Link
</Button>
<Button href="#" download>
  Download Link
</Button>