Button

Install

The button component is contained in the @cypress-design/react-button package. You'll also want to install @cypress-design/constants-button to get proper types for TypeScript.

npm install @cypress-design/react-button @cypress-design/constants-button

or with yarn

yarn add @cypress-design/react-button @cypress-design/constants-button

Usage

import Button from '@cypress-design/react-button'

import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <Button>
    <IconActionPower className="mr-2" />
    Button
  </Button>
)

Square buttons

import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <div className="flex items-center gap-4">
    {[20, 24, 32, 40, 48].map((size) => (
      <Button key={size} size={size} square>
        <IconActionPower
          style={{ width: `${size / 2}px`, height: `${size / 2}px` }}
        />
      </Button>
    ))}
  </div>
)

Possible variants

Variants and their available sizes plus styles when disabled is set to true (represented as 🚫).

import {
  default as Button,
  VariantClassesTable,
  SizeClassesTable,
} from '@cypress-design/react-button'

export default () => {
  const darkModeVariants = [
    'outline-dark',
    'outline-red-dark-mode',
    'outline-jade-dark-mode',
    'outline-indigo-dark-mode',
    'outline-purple-dark-mode',
    'red-dark-mode',
    'purple-dark-mode',
    'indigo-dark-mode',
    'disabled-dark-mode',
  ]

  return (
    <div className="flex flex-wrap justify-stretch gap-[8px]">
      {Object.keys(VariantClassesTable).map((variant) => (
        <div
          key={variant}
          className="flex min-w-[180px] flex-col items-center gap-[16px] rounded px-[8px] py-[12px]"
          style={{
            backgroundColor: darkModeVariants.includes(variant)
              ? '#1a202c'
              : 'white',
            color: darkModeVariants.includes(variant) ? 'white' : 'black',
          }}
        >
          {variant}
          {Object.keys(SizeClassesTable).map((size) => (
            <div key={size} className="flex items-center gap-[8px]">
              {size}
              <Button variant={variant} size={size}>
                Button
              </Button>
            </div>
          ))}
          <div key={variant} className="flex items-center gap-[8px]">
            🚫
            <Button variant={variant} size="48" disabled>
              Button
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}