Buttons

There are three different buttons that can be leveraged and reused across the application:

Except from the SwiperButton all buttons take three arguments as props:

• onClick (function) is the function that is invoked on click
• children (element) are the child elements. Usually text or icons.
• additionalClasses (string) are the additional classes that are applied to the button

Primary button

The primary button that is usually used for call to actions.

Example:

  <PrimaryButton onClick={() => {}} additionalClasses="">
    Primary Button
  </PrimaryButton>

Circle Button

A button that is circle-round. It's the button you see on this page on mobile breakpoints to toggle the sidebar

<CircleButton onClick={() => {}} additionalClasses="">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      className="w-8 h-8"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M4 8h16M4 16h16"
      />
    </svg>
  </CircleButton>

Swiper Button

The SwiperButton is some sort of a checkbox that indicates an on-off state. It can be used for toggling boolean states.

It requires different arguments compared to the other buttons:

• checked (boolean) indicates the state of the Swiper. If true, the Swiper will appear as 'Checked'
• onClick (function) is the function that is invoked on click. Should be used to toggle the state of the Swiper.

Example:

<SwiperButton checked={false} onClick={() => {}} />

<SwiperButton checked={true} onClick={() => {}} />